Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fallback font choice based on different resolution in Chrome for Android

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41065

    @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](https://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](https://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?

    #115982
    chrisburton
    Participant

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

    #115983

    @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)
  • The forum ‘CSS’ is closed to new topics and replies.