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

Question

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?

Answer 1

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.

Answer 2

WebView in Android 4.0.X does not support web fonts

Answer 3

In KitKat (4.4.x), Google has changed the WebView's engine from WebKit to Chromium.

To improve predictability for the results you will actually get, here is a list of WebKit versions per Android version. Please mind that this is not an official list. It was compiled from a specific developer's collected statistics.

I have yet to find an official document on the subject, which might suggest that manufucturers were free to choose their own build of WebKit for their devices. This might explain the discrepancies you find between different devices.

So - what to do?

1. For 4.4.x devices, here is a pixel perfect guide.

2. For earlier versions, I suggest turning to dirty tricks such as this one: https://stackoverflow.com/a/7395170/606351