Web Font Heights Cross Browser Behavior

Why do web fonts render differently between browsers, and what steps can be taken to fix the issue?

I’m having some issues with cross browser web font issues. I am absolutely positioning spans with single characters within them. Between browsers, the characters seem to be positioned the same relative to each other(within a few pixels). However in IE, the grouping of characters is way off in relation to the rest of the flow of the document. The behavior when the characters are highlighted seems dramatically different in IE as well. Does this have to do with font metrics? All 3 browsers are being rendered with a WOFF font.

Rendered in Chrome:

Chrome No HighlightChrome Highlighted

Rendered in Firefox:

Firefox No HighlightFirefox Highlighted

Rendered in Internet Explorer:

IE No HighlightIE Highlight

Here is a snippet of the code:

<div style="border: 3px #000 solid; padding: 0px; line-height: 1; position: relative; width: 85.75px; height: 80px; font-size: 80px;">
    <span class="MathJax_Main" style="position: absolute; left: 0; top: 0;">3</span>
    <span class="MathJax_MathItalic" style="position: absolute; left: 40px; top: 0;">x</span>
</div>

Here is the CSS used to load the web font:
@font-face {
font-family: ‘MathJax_Math’;
src: url(‘woff/MathJax_Math-Italic.woff’) format(‘woff’),
url(‘svg/MathJax_Math-Italic.svg#MathJax_Math’) format(‘svg’);
font-style: italic;
font-weight: normal;
}

@font-face {
    font-family: 'MathJax_Main';
    src: url('woff/MathJax_Main-Regular.woff') format('woff'),
        url('svg/MathJax_Main-Regular.svg#MathJax_Main') format('svg');
    font-weight: normal;
}

.MathJax_MathItalic {
    font-family: 'MathJax_Math';
    font-style: italic;
}

.MathJax_Main {
    font-family: 'MathJax_Main';
}


Source: cross-browser

Leave a Reply