Geek Answers Handbook

Chrome for Android does not display Google websites correctly

I recreated the problem that I am using CSS font-family and Chrome for Android. The web browser does not correctly inherit fonts and uses a fallback font instead.

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

This seems to be a bug already reported by 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 should fix the problem, but this only fixes the problem for the installed font for the first element.

The JS Bin link will help explain what I'm talking about. So, if anyone has Chrome for Android, follow the link to find out what I'm talking about!

Thanks.

+6
source share
2 answers

My solution to the problem is to completely remove Google Webfonts and instead download the fonts to the web server and call them through CSS, for example:

 @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 websites are open, so we won’t need to look for downloads for fonts.

This solution works in both Dolphin and Chrome for Android.

+1
source

I also noticed this today. Not only on my Nexus 7 (Android 4.2.2), but also on Chrome for MacOS X on another MacBook Pro. Not such a big problem, since I usually prefer to convert the fonts I need through fontsquirrel.com, but for testing and prototyping, integrating fonts directly from Google is much more convenient.

0
source

More articles:


All Articles