Is there a way to smooth font icons in Firefox?

Question

I'm using icons. On Chrome and Opera they look fine. But if I try Firefox they look pretty blurry if the font-size of icons is lesser than 20px, while after 30px they look smooth. Is there a way to fix this?
For example the Firefox problem of images resizing resulting in blurry images can be fixed by rotating the image of a very small amount. Can something similar be applied to font icons?

To see how it looks, just go (using firefox) to any website with icons(like font awesome) and try resizing them to 20px and see how blurry they become.

Answer 1

The problem is coming from the font rendering that browsers use. Different platforms use different methods. Browsers opt to use the OS method or their own implementation.

The reason it looks better in Chrome is because Chrome doesn't subscribe to ClearType on Windows. IE and Firefox both do use it (to check this Start -> Adjust ClearType Text and toggle it on and off to see the difference). But Firefox on Mac and Linux won't use it there because it is a Windows only technology.

Chrome has the upperhand on this particular problem because it doesn't use ClearType it uses DirectWrite on all three platforms. This means that anything should look the same in Chrome no matter what OS you're on.

Why does this matter? Because you're not in control of the user's computer. You cannot force ClearType off, you cannot alter the user's ClearType settings. A user might change their ClearType settings anyway ruining any fine detailing you might do using text-shadow to make it work.

You might get better luck using cufon for this but it's by no means a sure thing.

The solution I'd go for is using images for these icons. That way I'll know for sure that no matter what you're using to view the icons, they will be the same for everyone.