Question

I have recreated the problem I’m having using CSS font-family and Chrome for Android. The web browser does not inherit fonts correctly, and, instead, uses the fallback font.

http://jsbin.com/iyifah/1/edit

This appears to be a bug already ticketed on Google ( http://code.google.com/p/chromium/issues/detail?id=138257 ).

Adding <meta name="viewport" content="width=device-width, initial-scale=1" /> to the HTML is supposed to fix the problem, but this only fixes the problem for the set font for the first element.

The JS Bin link will help explain what I am talking about. So, if anyone has Chrome for Android, go to the link to see what I am talking about!

Thanks.

Answer 1

My solution to the problem is to ditch Google Webfonts completely and, instead, download the fonts to the web server and call them through CSS, like so:

@font-face {
    font-family: 'Droid Sans';
    src: url('fonts/DroidSans-webfont.eot');
    src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DroidSans-webfont.woff') format('woff'),
         url('fonts/DroidSans-webfont.ttf') format('truetype'),
         url('../fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Google’s webfonts are open source, so we should have no problem finding the downloads for the fonts.

This solution works in both Dolphin and Chrome for Android.