css - @font-face not working on Chrome for Android -
I am trying to use the @ font-face in the mobile web application, and it Chrome for Android .
This IS is working on:
- Safari on iOS < / Li>
- Default Android Browser
- Safari on OSX
- Chrome on Windows
- Firefox on Windows
-
I am using remote debugging () to debug it, and it does not appear that there is any error.
If I go to the Networks tab in the Developer Tools - it does not appear that Chrome attempts to download the font (i.e., not to load the network call font )
Compare what I see in Chrome on Desktop (Windows and OSX) - You can see that the font is full:
Apart from this - if I go to the Resources tab - this is none The font does not show.
Compare this to the desktop on Chrome:
Bottom Line - Chrome on the desktop (and Mobile Safari on iOS) - Web Font is loaded and displayed. However, on Chrome on Android - Web font does not even load, it is displayed alone.
Any help or advice is highly appreciated!
OK - so I found the answer. Perhaps it will not be surprising for many people ...
Long story short - web fonts were used only in certain devices, which initially, display: any
It seems that most other browsers will automatically download web fonts, even if the displayed divisions are not shown. However, it seems Chrome does not download them on Android.
To make matters worse - if I later see something in the display of those divisions (e.g., dislay: block
) - Chrome is still not Download them - they just are not displayed.
In other words - fonts should be included in an element which is initially included in the presentation of the tree, otherwise they will never be downloaded.
To fix this - I included fonts on the temporary div with the visibility: hidden
- it forced Chrome to download the font.
It is hoped that anyone can help to avoid such problem that stumps me.
Comments
Post a Comment