Custom fonts not showing on iPad(Chrome and Safari)

Design help General
1

Hey guys,

I’ve embedded a custom font into my Webflow site and used it for my headings.
On desktop and mac, it looks good, but on iPad I’m seeing Arial instead.

Basically, my custom font is not showing on iOS. I tried TTF, OTF and WOFF, with the same result.

What could be the cause and how I might fix this?

Thank you guys!

Dev site: https://air-ballerz-dev.webflow.io/
Read-only: Webflow - Air Ballerz

2

Here’s how it looks on iPad:

282412129_2190094044495390_8267353662532178295_n
282412129_2190094044495390_8267353662532178295_n2048×1179 305 KB

3

Aww snap. I used to happen, haven’t seen that in a while.

Try this if it’s not too intense:

  1. replace the font by another one on the classes it’s define on
  2. in settings remove any file of the font
  3. designer, then click the unpublish links in the publish dialog, then republish
  4. now define the font again in settings using only TTF (when issues with IOS happen, try using TTF)
  5. unpublish again and publish
  6. test and let me know.
4

Thank you Vincent,

I tried this, but with the same result.

However, in the process, I realized what the problem was: the custom font was automatically defined as ‘Italic’, while in the designer, the font slant was not defined(and so it was automatically non-italic).

That’s why iOS had a problem resolving this.

slant
slant1120×129 39.9 KB

This was resolved as soon as I set it as Normal in the settings panel:

284666071_5536285276390981_59512820565659301_n
284666071_5536285276390981_59512820565659301_n2048×951 196 KB

Cheers!

2 Likes
5

@Alex_Hartan just saved me a massive headache, thank you. Had the exact same issue and can’t imagine how long it would have taken me to make that small tweak.