Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
add comment

marked as duplicate by John Conde Feb 17 '12 at 12:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1 Answer

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.

share|improve this answer
    
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. –  Oliver Salzburg 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. –  toomanyairmiles Feb 17 '12 at 11:01
add comment

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