imathis/octopress — Issue #378: Firefox 9 on OS X displays some Google Web fonts incorrectly
Author: pokrface
Created: 2012-01-15 20:41:14+00:00
State: open

With the automatic upgrade from Firefox 8 to Firefox 9, at least two Google Web Fonts (Arvo and Crete Round) are displayed such that the characters appear "doubled" or over-bolded when used as heading-font-family. The problem only appears to affect Firefox 9.0.1 on OS X; FF 9.0.1 on Windows 7, Windows XP, and FF 7 on Ubuntu 11.10 display things as they always have. Similarly, Chrome 16 on all 3 platforms, Safari 5.1.2 on OS X, and IE 9 on Windows 7 all display things normally--the only browser acting strangely is FF9 on OS X. I've tried this on all three of the Macs I have immediate access to and the problem manifested identically on each, even after creating a new FF profile with all default settings.

Image of my blog's front page using GWF Argo, rendered with FF 8 on OS X:
http://dl.dropbox.com/u/33609/ff8-text.png

Same page in FF 9 on OS X:
http://dl.dropbox.com/u/33609/ff9-text.png

Similar "doubling" or over-bolding occurs with other web fonts I've tried. I'm not sure exactly where the problem lies, since if I go to the GWF site and look at the two fonts I've tried which show problem behavior, they appear to be rendered without issue there. It's only when embedded into my Octopress blog that they show up mangled.

Might this be something Octopress is doing that Firefox 9 specifically doesn't like?

I've also noticed that FF 9 on OS X renders all fonts on the page in a different size than all other browsers. For example, using Fount (http://fount.artequalswork.com/) on an article heading in Firefox shows it being rendered at 40.4833 px; the same page in Chrome and Safari both show 40 px. The story is the same for all text on the page--article text in PT Serif is 18.4 px in FF, 18 in Chrome and Safari; sidebar text in PT Sans is 14.7167 in FF and 14 in Chrome and Safari.

Or does Octopress specify some of its text sizes in relative units that Firefox 9 has decided to incorrectly render, but other browsers are rendering correctly?

post-script: I also tried to reproduce the problem behavior on Ubuntu 11.10, but was unable to install FF 9. However, using a Mozilla PPA I was able to install Firefox 10 and the problem *does* occur there as well, though it isn't as pronounced because of Ubuntu's different text rendering method: http://dl.getdropbox.com/u/33609/text-ff10.png