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.