@font-face not working on Chrome for Android

Question

I'm trying to use @font-face in a mobile web application, and it's not working on Chrome for Android.

It IS working on the following:

• Safari on iOS
• Default Android browser
• Safari on OSX
• Chrome on Windows
• Firefox on Windows
• IE11 on Windows

Here's the code I'm using:

@font-face {
    font-family: 'liat';
    src: url('../fonts/liat_3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I'm using the Remote Debugging (https://developers.google.com/chrome-developer-tools/docs/remote-debugging) to debug this, and it doesn't appear that there are any errors.

Here's the part I really don't understand...

If I go to the Network tab in the Developer Tools - it does not appear that Chrome attempts to download the font (i.e., there's NO network call to load the font)

Compare that to what I see in Chrome on a desktop (Windows and OSX) - you can see that the font IS loaded:

Also - if I go to the Resources tab - it does not show any fonts.

Compare that to what I see in Chrome on the desktop:

Bottom line - on Chrome on the desktop (and mobile Safari on iOS) - the web font is loaded and displayed. However, on Chrome on Android - the web font isn't even loaded, let alone displayed.

Any help or advice is much appreciated!

Answer 1

OK - so I found the answer. Perhaps this won't be surprising to many...

Long story short - the web fonts were only used on certain divs that, initially, were set to display: none.

It looks like most other browsers will automatically download the web font, even though the divs that display them are not shown. However, it looks like Chrome on Android doesn't download them.

To make matters worse - if I later change the display of those divs to something visible (e.g., dislay: block) - Chrome STILL DOESN'T download them - they're simply not displayed.

In other words - the fonts must be included in an element that's initially included in the render tree, otherwise they won't ever be downloaded.

To fix this - I included the fonts on temporary div with visibility:hidden - this forced Chrome to download the font.

Hope this helps someone avoid the same problem that stumped me.