Fonts don't load on iOS

I am using Herculanum.ttf file from Font Book app of macOS. From the documentation at I have put the following code using Edit Font:

@font-face {
     font-family: 'Herculanum';
     src:url('${resourcesFolderName}/Herculanum.ttf') format('truetype');

I am using for hosting the animation at (in case there are any cross-origin issues to investigate).

I don't want any fallback fonts. I just want this font to load. And it does, on my Mac. It also shows correctly for iPhones in Responsive Design Mode of Safari.

But on my real iPhone 11 it the fonts loaded are different, they look like some default ones.

Maybe convert the ttf font to a web font (woff and woff2).

You could use an online tool like

1 Like

Looking at the developer console, it is a 404 for the font file:

Failed to load resource: the server responded with a status of 404 ()

It is working on the Mac because Herculanum is installed by default.

Did you include the font file (needing to be named exactly Herculanum.ttf) in your Resources Library? I assume you're still using OAM export... if you change the .oam to .zip and look inside, is the font there?

Yes, it is there in the 'Resources' inspector.

But it is not visible in the zip when I export the oam.

The font file is also not there when I do 'Show Package Contents' on the .hype file.

Maybe Hype is pulling it from the system instead of the resources? But then why is it showing it in the Resources inspector? And why isn't it there in the .hype?

You are not including the actual font file - you just have the Hype-based font description (the green T item). The font file would be something like a .ttf, .otf, .woff, etc. This needs to be referenced in the Hype font description as well, using the ${resourcesFolderName} magic variable. Please see: