Why did all my text break on iOS phones? [HELP]

[Applauz78]

Everything was fine and it magically just messed up. Is this something with an iOS update?

See here --> http://grillkingapp.com

[fotoroeder]

Maybe, on desktop the phone version looks great. On Android as well.

Maybe (watch "Developer" in the Safari Menu: Change to "Responsive Mode") you should adjust your minimum width to 320 instead of leaving it with 380 (iPhone SE in Responsive Show).

Ask Apple?

Clear browser cache and reload?

Best Regards,

Uwe

[Applauz78]

This is the weird part. It looks fine in desktop Safari in Responsive Mode ...  it's only broken on actual iPhone devices. I've tested on 4 different iPhone models and its broken on all of them.

This is a screenshot from an iPhone 6S Plus

[fotoroeder]

I guess it is an apple issue. How did you set up your text on the phone version?

Responsive or none? From not seeing any muse, try "none" or stretched to browser width.

It also seems that it takes another font?

Which font is it? Maybe a typekit issue?

Best Regards,

Uwe

[Applauz78]

This site was made 2 years ago.. its using the method of  /tablet    /phone  

The font is Saravek and is selfhosted.

[Günter Heißenbüttel]

I bet, this is not an "Apple issue"! Would be so simple: Broken -> Apple! Apple!

Because we don’t have the .muse file or the font its guessing time again!

From what I can see, the problem seem to be the weird use of ligatures. If it is this, it is not an Apple issue, but more an issue of other browsers, which don’t support ligatures!

Look into your site properties and see, if in "Site Properties/Advanced/Character Set" the option "All" is choosen. If yes change it to "Default Subset".

If this changes nothing, there is no other way as to provide a .muse file with only one page and nothing but the two text elements shown in your screenshot together with the complete(!) web font "Sevarek" (Savarek??)). Upload these files to Dropbox or a similar service and give us the link.

[fotoroeder]

I just thought about Apple because it looks good on Android. So Apple/Safari.

But Safari on desktop works fine too with it.

[Applauz78]

Character set was set to "All" .. aI changed to to "Default Subset"  ...  This didn't fix the issue though.

Font is "Seravek" -  Here is a download link of my font.  http://grillkingapp.com/seravek.zip

[Günter Heißenbüttel]

I repeat: "… provide a .muse file with only one page and nothing but the two text elements shown in your screenshot together with the complete(!) web font "Sevarek" (Savarek??)). Upload these files to Dropbox or a similar service and give us the link."

[Applauz78]

https://app.box.com/s/4v787rj39t3lridthemj2ab003o1avhl

[Günter Heißenbüttel]

Seems, that the font isn’t correct.

If I want to install it on a Mac, it warns me, that a font with the same "postscript name" is already installed –what definitely isn’t correct!

If i use another font (Myriad pro) supporting ligatures as well, all looks as it should on every device (phone, tablet, computer)

http://grilling-app.businesscatalyst.com

Are you sure, that your font isn’t a cracked version? The original font faces are sold in a multi hundred dollar region …

[Applauz78]

I can't recall re: the font. The site is over 2 years old.. I didn't do the initial design / font choice. These are the files I have. But odd to me that it works properly on every other phone, Android, etc .. just not on iPhones.

Even more strange that it WAS working on iPhones .. it just stopped working at some point.

[fotoroeder]

But really, if you do not own the font, use one from typekit. It´s by far the most easiest way.

[Applauz78]

ok.. but that doesn't explain why it works fine on every device, every browser .. except for an iPhone.

[Günter Heißenbüttel · Accepted solution]

Of course this may explain it! Perhaps the intern file name conflicts with a system font of iOS. The font doesn't only work on iPhone. My iPads are going crazy too. And my Mac tells my, that a font with the same intern name is already there. I only can use your font, when this other font is deactivated. Unfortunately FontExplorer Pro doesn't tell me, which other font is the conflicting one.

The problem I saw, when analysing the font on my Mac, may(!) be quite concerning: It may(!) affect our systems seriously. I'd recommend to delete this font completely, if you can't remember the source you got it from. But, seriously, I'd really remember, if I bought a font at that price.