Custom Fonts not Showing in IOS

Hi Sorry if someone has already started this thread. I am using Open Sans and a custom icon font that I made. They both work fine on the desktop browser. However, when I preview on an IOS device the fonts don’t load. I just get the default font (times roman or something). I have seen this issue on other sites (not created with Hype) with other fonts while using my Ipad and I have always wondered why the fonts aren’t loading. Does anyone know an easy fix for this issue. My fonts must be missing something.

Using the search function top left I landed on this: Using local fonts
Scroll down for DBear’s answer.



My fonts are loading in the desktop browser they just don’t seem to be working on my iphone and ipad. Was hoping someone had a fix for this but I don’t see one.

The most common cause is that the fonts do not exist on the other devices. Are you including your fonts in the Resources Library and adding @font-face code that references those files in Hype’s Custom CSS Font panel?

Yes, I have tried everything. I was hoping that someone out there might come across this issue. The thing is I don’t think it’s Hype. I have noticed this on other sites even CBS. The crazy thing is that it only seems to be happening on the iPad.

Same problem. I included the font the way it is recommended in the documentation.
It shows in my browser. Any browser -Opera,Firefox,Chrome,Safari -
But, when it’s uploaded to a different server, it shows Times.

I solved it by using the font as a picture. But this cannot be the solution.
Especially, when I have more Text.

But the real reason is, that the files exported from HYPE as a HTML-Folder have a much smaller data weight.
And most websites presenting HTML5-Ads are allowing not more than 200K max. 400K.
This is a real pain…

So, if anyone has a solution for this… I appreciate :slight_smile:

btw. If I export this little animation as a GIF - it has 4.something MBs. This is way to much!


Hi Thomas,

I figured it had to be my device are using X code to check if the font was working. Turns out it was my ad blocker. Once I turned it off the font loaded. Doesn’t make sense but it worked.

1 Like

Hi Les,

I will post a solution tomorrow. After my project is tested properly. I’ll provide a codesnippet how to make the CSS as well. When it’s working :sunglasses: