Search code examples
androidwebviewgoogle-webfonts

Google webfonts not working using Web View in Android 4.0 and 4.2.2


When using Google web fonts in my Android app that uses web view they work fine in version 4.4 of Android. Some devices with Android 4.2 show the default font, most work correctly. On Android 4.0 however all fonts default to the same default font.

Because we like to target Android 4.0 and higher with our app I am looking for a way to get the Google web fonts working reliably.

The app does little more than opening html files from a server in the web view.

Update: It turns out that some Android 4.2.2 devices do not show Google web fonts correctly. It is not clear what makes these devices stand out from the ones that I tested and where web fonts work correctly.

What can I do to make web fonts work reliably over different Android versions and devices?


Solution

  • The answers above are valid and give insight into the subject, thanks to moallemi and Vaiden for those. We cannot use web fonts on Android 4.0 that is a shame.

    The solution to our problem with webfonts on Android 4.2 was related to the fact that in the CSS that Google uses to include the actual font files they specify the format. This means that in Google's CSS they have code like:

    src: url("http://some.google.server/some/path/FontName.ttf") format('ttf');
    

    It turns out that fonts don't render in the WebView on Android 4.2 if the format() clause is present in the CSS (or <style> node of the HTML). The solution is therefore simple; the CSS should have a line like this:

    src: url("http://some.google.server/some/path/FontName.ttf");
    

    This makes the font work. This, however, does not make for a "simple" solution. Since Google provides the CSS containing this error you need to create, include/use and supply your own version of the CSS file and if you do not want to be subject of Google updating the location of its font files you need to host the font files yourself.