@font-face not working on Chrome for Android @font-face not working on Chrome for Android google-chrome google-chrome

@font-face not working on Chrome for Android


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.