Grow your CSS skills. Land your dream job.

Fallback font choice based on different resolution in Chrome for Android

  • # November 29, 2012 at 4:58 pm

    @jmc and I built a [site](http://vitkodance.com “Vitko Dance”) 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](http://www.dropbox.com/s/7syygs1txdnuvfu/Screenshot_2012-11-29-15-45-31.png “Chrome for Android Portrait Rendering”).

    And here is the site in landscape (intended): [Chrome for Android Landscape Rendering](http://www.dropbox.com/s/wl3potpmudzmdh7/Screenshot_2012-11-29-15-45-48.png “Chrome for Andorid 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?

    # November 29, 2012 at 7:43 pm

    Are you talking about the first letter issue? Try lettering.js? Although I have to point out that neither typefaces come off as elegant.

    # November 29, 2012 at 7:48 pm

    @chrisburton, no. That is caused by the same issue. Look at the header that says “Grand Opening!” and “January 2013″. Notice how in the landscape picture, it’s a nice, script font. Then in the portrait picture, it’s a very general sans font. These fonts are set in em’s, hence why the header is much bigger (proportionally) in the portrait picture. I think this somehow causes the font to fallback, but I’m not sure why..

    The first letter issue is borne out of the same problem (I think). The styling on the list items is such that I use the :first-letter pseudo-element, and set the font size to 1.5em. In portrait, this doesn’t render correctly, and renders smaller than the neighboring text (which is also sized in em’s).

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".