How to prevent different browsers rendering fonts differently?
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.
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.