: How to overcome browser-specific font rendering differences? Possible Duplicate: How can I make fonts render the same way across different web browsers? So I was working on our website

@Kevin317

Posted in: #Css #Fonts

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:


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



In IE and Firefox, the same place looks like this:


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.

Vote Up Vote Down

Login to post a comment!