Possible Duplicate:
How can I make fonts render the same way across different web browsers?

So I was working on our website and came across an interesting issue.

I usually work with Chrome when building web content. In Chrome, our footer looks like this: enter image description here

From what I've heard, it looks like this in all Webkit-based browsers.

In IE and Firefox, the same place looks like this: enter image description here

As you might be able to see, the font is ever so slightly smaller (at least in width and/or kerning).

So what causes this? The font family I set is:

font-family:Calibri, Arial, Helvetica, sans-serif;

Obviously, I have Calibri installed locally (I work on a Windows 7 machine). I also tried setting up a webfont to see if that helps. It didn't (but maybe I messed up).

I am aware that it is unreasonable to expect pixel-perfect matching between browsers. But in this case the difference is so drastic, that I assume I simply made a mistake.


There's a question here that answers yours. Basically, thats the way it works, each browser has it's own rendering engine (Gecko, Trident, Webkit etc) and the differences between them are only getting more extreme IMHO.

If you're very unhappy with the look you could consider a font rendering technology such as cufon, typeface.js or SiFr. These do achieve somewhat more consistent results but there are still variations.

  • I guess the way to go is to adjust the site to work around the issue instead of trying to force font rendering. Good to know. Thanks. Feb 17 '12 at 10:48
  • @OliverSalzburg unfortunately that's the case, you can use IE conditional comments to target MS browsers and there are work arounds for the others. Feb 17 '12 at 11:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.