CODEWITHSUNDEEP
androidgoogle-chromefont-faceresolutionwebfonts
Nicholas Ryan Bowers
Nicholas Ryan Bowers

Reputation: 68

Chrome for Android rendering fonts differently based on resolution

EDIT 1: Apparently, I don't have enough reputation to post images yet, so I had to externally link them.

EDIT 2: Apparently, I don't have enough reputation to post more than two hyperlinks, sorry for the inconvenience of having to copy and paste a URL.

Built a site (http://vitkodance.com) for a friend, and used the @font-face implementation of a Google Web font. I then invoked the fonts with a series of fallbacks. Titles are in a script-ish style, and the body is serif-ish. When I load up the website on Chrome for Android on my phone, the fonts render differently, depending on the orientation of the phone (and therefore the available resolution).

Here is the site in portrait (fallback font): Chrome for Android Portrait Rendering.

And here is the site in landscape (intended): Chrome for Android Landscape Rendering.

On my Nexus 7 tablet, the font displays as intended in both orientations. Is there a way to fix this? Is this expected behavior based on the fonts that I chose, or is it an issue that has to deal with values for font size (in em's) and line height?

Upvotes: 2

Views: 2972

Answers (1)

AAA
AAA

Reputation: 2032

I am having the same problem and asked a similar question.

Currently, this is a bug being tracked here http://code.google.com/p/chromium/issues/detail?id=138257

Chrome for Android displays the fallback font, but Dolphin browser displays the correct font, at least on my devices. So this seems to be a Chromium bug.

For some people, defining an initial scale fixes the problem, like so:

<meta name="viewport" content="initial-scale=1">

Also adding -webkit-text-size-adjust:100% to your CSS could fix the problem as well.

I wish I had a definitive answer, but it seems there is none. Let me know how it goes.

Edited Answer:

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 you should have no problem finding the downloads for the fonts.

This solution works in both Dolphin and Chrome for Android.

Upvotes: 4

Related Questions