Problem with font display on iPhones only

[pdxezbiz]

Hi, I’ve uploaded a custom font to use on my site (currently being used on h1, and some of the h3) – it works great and looks perfect, except on iPhones specifically. On iPhones, some of the letters merge together. We have tested different iPhone devices and different browsers, but we still see the problem.

SCREENSHOTS – Please look at the custom font in Yellow:
1. Here you can see the font on my laptop, it looks perfectly fine – https://theatre.pdxezbiz.com/wp-content/uploads/2019/02/no-font-issue-on-laptop-iphone-preview.png

2. Here is a screenshot from an iPhone, and you can see that some of the letters have merged – https://theatre.pdxezbiz.com/wp-content/uploads/2019/02/iphone-font-issue.png

Do you know why this is happening?
What can I do to fix this this problem?

[DineshKeymaster]

Hi,

Can you please send me your site url ? Seems like there is line spacing issue. I will check it in iphone simulator and let you know the solution.

Thanks

[pdxezbiz]

Thank you! Website is http://www.theatre.pdxezbiz.com

[DineshKeymaster]

Hi,

Can you please keep this css and see if this fixes the issue ?

.kad-site-title{letter-spacing: 0.5px;}

Hope this helps.

Thanks

[pdxezbiz]

The problem is not only with the site title. As I sent in the screenshots, it is a problem with the letters “A” and “V,” INCLUDING the site title, AND ALSO the h3 in the footer.

In addition, CSS that targets letter spacing can’t fix this problem. The letter spacing is fine, for all fonts, across the entire site. The only issue is with these two letters. This font does not inherently have this problem.

Do you have any idea why the font would have this display glitch ONLY on iOS???

[DineshKeymaster]

Hi,

I am sending the above css for just test. If this works then we can replicate same for all.

Can you please try this one ?

Thanks

[Author]

Posts