Okay, this is an odd one. I’m working on my new site and experimenting with typography. I’ve installed the Windows ‘Vista’ fonts on my Mac system, because I want some sense of how things will look in Vista as I develop web sites. And because, hey, you know, free fonts.
I really think Microsoft did a decent job with some of these; my favorite, by far, is Calibri. I think it makes quite elegant body copy online. So while in the testing stages, I left it as my primary font-face for the new site. Turns out there’s a problem with that. I noticed that some of the text was missing on several of my pages, and upon further scrutiny, it turns out that it was still present in the layout, just not … visible.
Hey, where did that text go?
As you can see from these screenshots, text which is showing up normally in Firefox 3 (and other browsers I checked, including FF2/Win). But in Firefox 2, it’s just plain missing. This kind of threw me.
After some experimenting w/ my style sheet, I established that if I removed #content { font-size: 1.3em } from my styles, the text appeared again. (Or, as I later discovered, if I resized the text enough, but I had to enlarge it about 3 times!) I could also bump it up to 1.4em, and the text showed up again.
I’d never seen this before, and since Firefox 2 was until very recently my primary browser (I’ve been reluctant to move to 3) this was an odd one.
After exploring further, I realized that Calibri was the culprit. I’d specified it at the front of my font-family list (font stack seems to be the new term de rigeur). As soon as I moved it down the list, so that I’d pick up another font first, Firefox 2 was happy.
Now, probably not all that many Mac users have installed Calibri and then come to your site. But still, handle with care.
Sigh. I really liked Calibri, too.