Fonts don't load on iOS

Elements Typography
1

I am using Herculanum.ttf file from Font Book app of macOS. From the documentation at https://tumult.com/hype/documentation/v4/#typography I have put the following code using Edit Font:

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

I am using Wordpress.com for hosting the animation at https://DVNSH.com/podcast (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.

CleanShot 2022-08-13 at 20.30.26
CleanShot 2022-08-13 at 20.30.26859×583 35.4 KB

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

IMG_2212
IMG_2212828×1792 166 KB

2

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

You could use an online tool like

1 Like
3

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 ()
https://dvnsh.com/podcast/Podcast.hyperesources/Herculanum.ttf

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?

4

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

CleanShot 2022-08-22 at 13.29.31
CleanShot 2022-08-22 at 13.29.311440×900 127 KB

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

CleanShot 2022-08-22 at 13.30.17
CleanShot 2022-08-22 at 13.30.171114×686 127 KB

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

CleanShot 2022-08-22 at 13.34.40
CleanShot 2022-08-22 at 13.34.401114×686 89.8 KB

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?

5

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: