My fonts look different in Firefox

One of the most annoying parts of web development is making sure your website looks the same on all browsers. A few days ago I noticed that on one of my websites the fonts are different in IE and in Firefox. I tried everything I could find on the web to make the fonts look the same – setting the font-family, font-size, font-weight, font-style, font-face, and every other aspect of the font. But the fonts still looked different.

Then I read about ClearType – Microsoft’s subpixel rendering technology that is turned off by default in Windows XP, but turned on by default in IE7 and IE8. This means that when using Windows XP, the same font will be rendered differently when viewed in IE and in Firefox.

To enable ClearType go to the Control Panel, then select Display, select the Appearance tab, and click on the Effects button. The second drop-down is labeled “Use the following method to smooth edges of screen fonts“. Change the selection from “Standard” to “ClearType“. Now any web page you load will be rendered using ClearType.

Enabling ClearType will eliminate the difference between the fonts in the different browsers. However, this will also change the way fonts are rendered throughout the whole operating system. To date there is no way to enable ClearType only in specific applications.

Here are some samples of pages before enabling ClearType and after enabling it:

Before