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.
How to overcome browser-specific font rendering differences?
css;fonts