How to use custom fonts with Tumult Hype Animations Wordpress Plugin?

Hello everyone,

I’m using a .oam file with a custom font on my wordpress website thank to Tumult Hype Animations Wordpress Plugin. The font is “Aileron” (Heavy)

Console problem: GET http://jordan-jeandon.fr/jordan-jeandon.hyperesources/Aileron-Heavy.ttf 404 (Not Found)

How can I use a custom font?

Thanks :slight_smile:

I assume the font works when you do a local preview? (If not, that’s the first item that would need to be corrected!)

The 404 indicates that the font file does not exist on the server, so it might not have been added or uploaded properly.

If you attach a zip of your .hype document and the .oam (if you still have that), then we can take a closer look and where the problem might be.

Hello Jonathan,

It’s working in local preview. You can find the .zip with .oam and .hype on this link (I can’t upload it here cause it’s more than 3Mo): https://drive.google.com/file/d/1wKC0rE4WN-KKOMJumrAxbDCsAZn5e4Z-/view?usp=sharing

It’s only the smartphone design btw

When you load the font, it is trying to load the font from

jordan-jeandon.hyperesources/Aileron-Heavy.ttf

But your Hype document resources, including the font, was uploaded to something like:

http://jordan-jeandon.fr/wp-content/uploads/hypeanimations/1/jordan-jeandon.hyperesources/

So you could either update your custom font in Hype to reference the full URL of wherever your ttf + other font files are upload to your server, or you could switch your Hype embed to use the ‘iframe’ method when embedding it.

An example of the full URL would be:

http://jordan-jeandon.fr/wp-content/uploads/hypeanimations/2/jordan-jeandon.hyperesources/Aileron-Heavy.ttf (but check that your files are actually there first)

You can do that from the Hype animations dashboard by selecting iframe instead of ‘div’ and then clicking ‘update’:

That will load the Hype document from within an iframe and the font references will work irrespective of the page you load the Hype document on.

It’s working! Thanks a lot

1 Like