@Font-Face Not Working in Chrome for Android

@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.

Mobile Firefox and Chrome not recognizing @font-face

This seems like a duplicate from: @font-face Not Working in Chrome for Android

The problem may be related to your font-family declaration (I can't tell because you haven't posted that part). If, for example, you had this:

font-family: fghjkjh, 'jump_startregular', sans-serif;

...Chrome for Android would simply pretend that fghjkjh is installed (but really use the default Android font) and ignore everything else. (Not sure if this is a bug or a feature.)

In which case, the solution is to move 'jump_startregular' to the front - and possibly add a local source to the @font-face block instead, which probably causes problems with other older browsers.

"Taken word for word from the link mention above"

If this doesn't work, I suggest you use google fonts instead.

@font-face not working in Android browsers

I subset OFTN Aller (bold) more since I'm not using it for other headers any more (only the logo) and that seemed to solve the problem.



Related Topics



Leave a reply



Submit