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

The previous comment helped me a lot, thank you. I managed this way in wordpress and it works. Put this code with your font "YOUR-FONT" in to your CSS.

@font-face {
    font-family: 'Conthrax';
    src: url('/wp-content/uploads/fonts/conthrax-sb.eot');
    src: url('/wp-content/uploads/fonts/conthrax-sb.eot') format('embedded-opentype'),
    url('/wp-content/uploads/fonts/conthrax-sb-webfont.wofff') format('woff'),
    url('/wp-content/uploads/fonts/conthrax-sb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; 
}

Answer 2

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.

Answer 3

Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.

Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

Hope that helps.