Custom fonts not showing on iPad(Chrome and Safari)

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

Here’s how it looks on iPad:

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.

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.

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

Cheers!