Update (June 23, 2008): As promised, Firefox 3 has fixed the below problem and now renders the Vista font families perfectly, along with many other improvements. This article is now irrelevant.
Update: Argh! Of course, immediately after posting this I noticed Richard Rutter had this all perfectly explained long ago. Sigh. At least the visual example here will still illustrate what a serious problem this is.
If your preferred browser is Firefox for Mac, I wouldn’t recommend downloading the Vista/Office 2007 fonts yet. And if you design web sites, I wouldn’t recommend using them in any of your designs, and here is why. If you have the fonts installed and you’re viewing this in Firefox for Mac, the following may shock you:
11px Calibri
12px Calibri
13px Calibri
14px Calibri
15px Calibri
16px Calibri
17px Calibri
18px Calibri
19px Calibri
20px Calibri
10px Calibri Bold
11px Calibri Bold
12px Calibri Bold
13px Calibri Bold
14px Calibri Bold
15px Calibri Bold
16px Calibri Bold
17px Calibri Bold
18px Calibri Bold
19px Calibri Bold
20px Calibri Bold
10px Calibri Italic
11px Calibri Italic
12px Calibri Italic
13px Calibri Italic
14px Calibri Italic
15px Calibri Italic
16px Calibri Italic
17px Calibri Italic
18px Calibri Italic
19px Calibri Italic
20px Calibri Italic
10px Calibri Bold Italic
11px Calibri Bold Italic
12px Calibri Bold Italic
13px Calibri Bold Italic
14px Calibri Bold Italic
15px Calibri Bold Italic
16px Calibri Bold Italic
17px Calibri Bold Italic
18px Calibri Bold Italic
19px Calibri Bold Italic
20px Calibri Bold Italic
10px Cambria
11px Cambria
12px Cambria
13px Cambria
14px Cambria
15px Cambria
16px Cambria
17px Cambria
18px Cambria
19px Cambria
20px Cambria
10px Cambria Bold
11px Cambria Bold
12px Cambria Bold
13px Cambria Bold
14px Cambria Bold
15px Cambria Bold
16px Cambria Bold
17px Cambria Bold
18px Cambria Bold
19px Cambria Bold
20px Cambria Bold
10px Cambria Italic
11px Cambria Italic
12px Cambria Italic
13px Cambria Italic
14px Cambria Italic
15px Cambria Italic
16px Cambria Italic
17px Cambria Italic
18px Cambria Italic
19px Cambria Italic
20px Cambria Italic
10px Cambria Bold Italic
11px Cambria Bold Italic
12px Cambria Bold Italic
13px Cambria Bold Italic
14px Cambria Bold Italic
15px Cambria Bold Italic
16px Cambria Bold Italic
17px Cambria Bold Italic
18px Cambria Bold Italic
19px Cambria Bold Italic
20px Cambria Bold Italic
If you’re using Firefox for Mac right now, and you have the above fonts installed, you’ve probably noticed that much of the above text set to 13px, 15px, 16px, 17px and 19px is completely invisible. 12px Calibri also makes the occasional disappearance as well. Firefox for PC is unaffected by this and displays all of the above fine. At first I was shocked that I couldn’t find any mentions of this in the blogosphere, but even after being around about a year, seeing these fonts used in the wild is rare. I probably wouldn’t have noticed if I didn’t regularly visit Pitchfork Media, which uses 15px Cambria for headers and 12px Calibri for body text and is rendered unreadable.
See also: Constantia has terrible letter spacing as well.
3 Responses to “Calibri and Cambria Horribly Broken on Firefox for Mac”
Oct 16th, 2007
[...] further ClearType font news (see also), there is another issue: most of the new fonts are undersized in comparison with other fonts. So [...]
Jun 23rd, 2008
6/22/08: Regarding your September 30th, 2007 posting:
“Calibri and Cambria Horribly Broken on Firefox for Mac” – Is this still true?
Jun 23rd, 2008
Jackie, fortunately this is no longer true! Firefox 3 has completely redone how it renders type, and no longer suffers from this problem. I’ll update the article.