Excessive letter spacing in font-face causing display issues on Apple devices such as iPhone and iPad

Recently, I designed a website using some unique fonts that aren't supported on all devices. To ensure compatibility across various platforms, I converted the fonts to all major file formats, including SVG for iPhones and iPads. Surprisingly, this solution didn't work as expected on these Apple devices.

In the past, I successfully implemented similar font conversions on other websites, so I'm puzzled as to why it's not working this time around. Any assistance from someone knowledgeable in this area would be greatly appreciated.

I've shared the website online in hopes of receiving some guidance. Perhaps it's just a minor oversight causing this issue, but I've been struggling to pinpoint the problem for days now. Hopefully, one of you brilliant individuals can offer your expertise once again.

Here is the CSS code used:

@font-face {
    font-family: 'Franchise';
    src: url('font/Franchise-Bold.eot?#iefix') format('embedded-opentype'), 
         url('font/Franchise-Bold.woff') format('woff'), 
         url('font/Franchise-Bold.ttf')  format('truetype'),
         url('font/Franchise-Bold.svg#Franchise-Bold') format('svg');
}

The live website link is www.pikatzu.com/demo

EDIT

After researching, I found a potential fix for the font display issue on mobile Webkit browsers in this discussion: @font-face not working in mobile Webkit. However, I noticed that the letter spacing on the iPhone and iPad appears excessively large. Is there any way to resolve this?

Thank you in advance for your help.

iphonehtmlcssipadfont-face

Answer №1

The issue I encountered was with the font converter I had been using, which was fontforge. After a quick search, I discovered an alternative solution: . I recommend this for others who are also using fontforge.

Many thanks to everyone for your assistance and time :-)

Warm regards, Seedorf

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML template with three columns where the content spills over the edges, despite having a visible border and a height of 100%

I have a wrapper containing 3 divs: <div id="wrapper"> <div id="leftbar"> Lorem ipsum dolar sit amet </div><!--LEFTBAR--> <div id="middle"> Lorem ipsum dolar sit amet </div><!--middle--> <div id="rightbar"&g ...

htmlcss

Purge precise LocalStorage data in HTML/JavaScript

How can a specific item in the localStorage be cleared using javascript within an html file? localStorage.setItem("one"); localStorage.setItem("two"); //What is the method to clear only "one" ...

javascripthtml

The centrally-aligned flexbox div remains at a fixed size, preventing any text truncation within its nested elements

My goal is to truncate the lengthy text in the span with the id of first-item when the screen size decreases. However, I am encountering an issue where setting margins on the parent element prevents it from shrinking, thus causing the truncation not to wor ...

htmlcssflexbox

Discovering all class names following the same naming convention and storing them in an array through Javascript

Hey everyone, I could use some assistance with a coding challenge. I'm aiming to extract all class names from the DOM that share a common naming convention and store them in an array. For instance: <div class="userName_342">John</div> & ...

javascripthtml

Create HTML files that generate a log.txt document

It seems like every time I try to find a solution for writing files with PHP or JavaScript, I end up in a never-ending argument. Some say it's impossible, while others claim it's possible under certain conditions. Unfortunately, none of the code ...

phphtml

What is the best way to enhance the appearance of a list item that includes a visited hyperlink?

Currently, I am utilizing Stylebot in Chrome to modify certain styles on a webpage that I frequently browse. My goal is to conceal elements in a list that have links I have already visited. For instance, there is a <tr> with the class table-row, and ...

csscss-selectors

Showcasing a single item per row in carousels on small and medium-sized devices

I have successfully implemented a Bootstrap carousel to display 3 items in a row, which is working well. However, I am looking to modify it so that only one item is shown on smaller devices such as mobiles or tablets. Can anyone assist me with this? Belo ...

htmltwitter-bootstrapcssmedia-queries

What is the most effective way to reduce the spacing between columns in Bootstrap while maintaining consistent spacing on the outer edges?

I have set up my bootstrap columns as shown below: <div class="col-6"> <a href="gallerij/stockfotos/boeken" class="catphotowrap"> <div class="catphotodiv"> <img class=&quo ...

htmlcssbootstrap-4styles

Issue with displaying Bootstrap 3 modal on Mozilla browser

Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code: <button type="b ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for clearing the browser cache when working with AngularJS in HTML code

Does anyone know how to clear the browser cache in HTML when using AngularJS? I've tried adding the following code to my index.html file and also used $templateCache in my app.js without success. <meta http-equiv="Cache-Control" content="no-cache, ...

htmlangularjsbrowser-cache

HTML: attempting to align a quote image next to some text within the page

I want to add a quote to my website, but I'm having trouble positioning it correctly. https://example.com/quote-image.png Every time I try to adjust the position of the quote image, it moves when I zoom out. https://example.com/background.png I attem ...

htmlcss

Creating HTML tables with consistent vertical lines and broken horizontal lines

Looking to style an HTML table with unique grid-lines. Wanting continuous horizontal lines (foreground) and interrupted vertical lines (background), overlaid by the horizontal lines. Different line heights, some 1px, others 2px for variety. Vertical lines/ ...

htmlcss

Automatic Clicks in the Chrome Console

I've come across a website that requires me to click on multiple elements scattered throughout the page Here is the code for one of the elements: <span class="icon icon-arrow-2"></span> Is there a way to provide me with the console comm ...

javascriptjqueryhtmlcssgoogle-chrome

Replace the checkbox display heading with a text box in the designated area

I'm new to using kendo ui Currently, I am attempting to show a text box in the first column header. Instead of the checkboxDisplay heading, I want to replace it with a text box. Could someone please provide guidance on how to resolve this issue? Here ...

javascripthtmlangularjskendo-uikendo-grid

The functionality of the dynamic text box is disrupted when a form element is added

I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...

javascriptjqueryhtmltwitter-bootstrap

The custom CSS styling is triggered only when the page is resized in Bootstrap

Currently, I am utilizing bootstrap alongside my custom CSS. The issue I am facing is that some of the styling from my custom CSS only takes effect after resizing my browser window to a smaller size. My custom CSS seems to be applied when the website adapt ...

csstwitter-bootstrapjoomla2.5

Tips for containing `overflow` within a flexbox container

I've organized my body space into three sections: header, content, and footer. To achieve a sticky footer effect at the bottom, I used the flex property in my layout. However, I'm struggling to add a scrollbar to my main container box. I've ...

htmlcssflexbox

Delay in dropping while using React Beautiful DnD

While incorporating react-beautiful-dnd into my project, I faced an issue where the dragged item is initially positioned incorrectly in one of the lists. There is a brief delay before it jumps to its correct position. You can see the problem in action by ...

cssreactjsreact-beautiful-dnd

To optimize your bundling process, include the leaflet.css file from the node_modules/leaflet directory using webpack

Currently, I am working on developing a map application using webpack and leaflet. While I can successfully require leaflet.js from my map.js file, I encounter an error when trying to call leaflet.css. The configuration in my webpack.config.js is as follo ...

cssnode.jsnpmleafletwebpack

Rule for restoring scroll position upon reloading web pages in browsers

When it comes to websites that handle data asynchronously, the behavior of scroll position restoration upon browser refresh can vary. Sometimes the scroll position is preserved, while other times it is not. For example, when reloading after scrolling down ...

javascripthtml