How to prevent different browsers rendering fonts differently?

Question

I have an issue with trying to maintain a constant font style across all browsers. As seen below, safari\'s font rendering system makes the font weight smaller than the font

Answer 1

A lot of the differences are more to do with the fact browsers add or omit different default weights / styles to fonts. To stop this happening make sure in your CSS you have font-weight: normal and font-style: normal in your @fontface code block.

You then need to apply the necessary styles to the HTML elements.

So if I have a font called geo-light I would do:

@font-face {font-family: 'geo-light';
    src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal; 
}

And then add the specific styles for each element that uses that font.

/*SET STYLES ON ELEMENTS*/
h1, h2, h3, h3 > a, p, li {
    font-family: 'geo-light', sans-serif;
    font-weight: normal;
    font-style: normal; 
    text-decoration: none;
}

I hardly ever see this done on sites, and the pre-cursor to this is what is happening in your image. Those differences are not being caused by an anti-aliasing issue.

This 1st and 3rd articles in the original answer are regarding a completely different problem and the middle article that is being linked to would mean the reverse effect happening in your image examples.