@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).
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?
@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).