Big fonts not smooth in firefox on windows

Question

So, i am making a small portfolio site (http://www.cip.ifi.lmu.de/~fritschd/testDebo/), where i have a BIG box with a BIG font. On mac, everything is fine, on windows however, depending on the browser it can really suck. Firefox on windows is one of those.

Is there a way to smooth this big font? What other options do i have? (I don't want to use an image for SEO reasons). Other (system) fonts have the same issue btw.

EDIT: The example can be found at the linked page. The font has a size of ca. 180px, so it's pretty big. The browser that seems to have problem is the latest build of firefox on windows. If you look at the div with the name in the page, the borders are pixelated. I read that it is an issue with windows true font option and browsers that don't have own settings (i.e. chrome) regarding that. So what are my options at this point?

Answer 1

It's a very well-known problem of using ClearType fonts on Windows, not bound to any specific web browsers. Read this very clearly explanation font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend

This problem should not affect Windows 7 and/or IE9 users.

My suggestion is to implement your big block of text using transparent PNG using the -9999px technique that satisfy the SEO requirements. Have a look at this for the original famous -9999px css-image-replacement-technique/ or this for the newly developed technique Replacing-the-9999px-hack-new-image-replacement/

Answer 2

Unfortunately as far as I know there isn't anything you can do in code that can help, but it can be remedied a bit in your own browser by going to about:config then toggling gfx.direct2d.disabled to true. Hopefully that'll help some.