Font rendering weirdness with @font-face

I’m getting poor quality rendering in Safari 5 and Firefox 3 (possibly others as well, though this is what I’ve tested).

I’m using a few fonts from FontSquirrel via their generator. Usually, when the page loads, everything looks fine, but when scrolling around even a little bit, some fonts will redraw poorly. I’ve attached two screencaps of the font, rendering correctly, and then of the font rendering poorly.

These were fonts available on FontSquirrel, so it shouldn’t be a corrupted source file or anything. Google didn’t yield anything about issues here.

Are there any know issues with using @font-face with more than one font on a page? Any theories?

If you’d like to see this on the live site, look here in the sidebar.

I’m actually testing on my Mac. Can you guys point me to any web resources on this? I can’t find anyone else talking about this problem so far.

Redraw failure, pretty typical for any of these ‘advance font’ techniques… They all pretty much break horribly in all browsers on my machine, which is why I usually say screw it, suck it up, and use a standard font instead.

Hence why I wouldn’t even be wasting my time on trying to do that in the first place.

I don’t think there’s many resources on it but I’ve encountered the issue quite often (ironically) in Internet Explorer with certain typefaces.

Perhaps font smoothing is playing a part in the issue of rendering, but I guess that’s what you get for taking advantage of CSS3 (an unfinished draft). :slight_smile:

Hmmm, that doesn’t happen in the Mac versions of FF and Safari.