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 weight of chrome's.

Safari:

Chrome:

I've tried using the solutions found on other questions though they have not solved this issue. How can I maintain a constant font style across all the major browsers? That is Chrome, Safari, Opera, Firefox and Internet Explorer.

Here is what I have tried.

1. -webkit-font-smoothing: antialiased;

2. font-weight: 800;

3. text-rendering: optimizeLegibility;

Answer 1

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.

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.