@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
How to Parse JSON Array Without Any Object in Retrofit
How to Update Google Play Services for Android Studio 2.2 Emulators
In Android Applications What Is The Role of "R.Java"
Android Webview Cannot Render Youtube Video Embedded via Iframe
Using Collate in Android Sqlite - Locales Is Ignored in Like Statement
Why Did The Listview Repeated Every 6Th Item
How to Get Rid of Incremental Annotation Processing Requested Warning
Clearing Notification After a Few Seconds
Android: Change Tab Text Color Programmatically
Android Browser Textarea Scrolls All Over The Place, Is Unusable
How to Make Grid View Scroll Horizontally Not Vertically in Android
Onlistitemclick Is Not Working for Listview
Web App on Android Browser Width Issue
CSS Overflow and Absolute Positioning Issue on Android Browser
How to Set Text Color of a Textview Programmatically
Insufficent_Storage_Memory Message While Install 50 Mb APK in Emulator