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: Safari

Chrome: 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.

-webkit-font-smoothing: antialiased;
font-weight: 800;
text-rendering: optimizeLegibility;

I'm curious about that too. Does something like `webkit-font-smoothing` give it more of a defined appearance? I know that it has to do with the font rendering engine being different on different browsers and OSes (Chrome does not use the default if I recall correctly). I don't think it's possible to make this consistent (apart from using something like, say, `cufon`), but I'm interested to know. — somethinghere, Jun 16 '15 at 19:55
Font rendering is really an odd thing, I've found prefixing will help a ton, as well as larger font families for fall backs. Edit for thin fonts I found it beneficial to use `-webkit-font-smoothing: antialiased;` — knocked loose, Jun 16 '15 at 19:55
Please also show some code: is this a custom web font, what CSS are you using to force the same style as much as you think you can, etc? — Mike 'Pomax' Kamermans, Jun 16 '15 at 19:57
You're not gonna get 100% consistency across browsers for the reasons mentioned above. the only way to me is to use images of text to use instead of the actual text, but even in that case you'll have inconsistencies because of the scaling, etc.. — alliuca, Jun 16 '15 at 19:58
This is not a custom web font and I am currently using no CSS to force the same style across all browsers because none of the options found on stack overflow seem to work. — Pav Sidhu, Jun 16 '15 at 20:00
Especially if none of the options found work, show code. Show what you tried, and how that didn't work. Having no CSS in place is not a basis to justify a belief that things should render the same. Rather the opposite: without *any* CSS, we can bank on the fact that it *won't* render the same. So: write some CSS so that font-family, weight, etc. are all force to identical values at least, then look at what the result is, and see if your question is still valid. If so: update your question with that code, so that we know what you've already tried, and can make informed recommendations. — Mike 'Pomax' Kamermans, Jun 16 '15 at 20:17
Safari will tend to display fonts a little "thinner" because of the differences in subpixel rendering. You might be able to improve this with: -webkit-font-smoothing: subpixel-antialiased, but bottomline, different browsers are going to render fonts differently. — jme11, Jun 16 '15 at 20:45
The web is not a _print medium_. Accept it. You will never have full control or be able to make things look exactly the same across browsers and platforms. I think @Mike'Pomax'Kamermans advice is the place to start to gain the consistency that _is_ possible. — Stephen P, Jun 16 '15 at 21:37
@PavSidhu your update is still missing the crucial information on which font you're even loading here. Are you relying on a system font? By name, or implied by relying on the (unreliable) `sans-serif` generic category? Can you create a jsbin.com example that shows off your problem? Because we're not here to guess what you have, you're here to give all the details, and then we can help by looking at *all* the details. Three CSS properties does not constitute working code that we can look at, I think you will agree. — Mike 'Pomax' Kamermans, Jun 16 '15 at 23:34
Related: Font-size consistency across browsers: http://stackoverflow.com/questions/521832/consistent-font-size-across-browsers-web-development Font-weight consistency across browsers: http://stackoverflow.com/questions/5082632/same-font-except-its-weight-seems-different-on-different-browsers — Adriano, Apr 11 '17 at 11:16

score 28 · Accepted Answer · answered Jun 16 '15 at 21:24

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.

score 5 · Answer 2 · answered Jan 21 '18 at 01:56

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.

score 4 · Answer 3 · answered May 22 '21 at 16:09

4

Using a combination of the following styles should result in an almost consistent rendering of a font across all browsers.

{
    -webkit-font-smoothing: antialiased;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

answered May 22 '21 at 16:09

Byron

593
3
10

Is this widely supported by browsers ? – Harsh Gaur Jun 06 '23 at 12:10

score 0 · Answer 4 · edited May 07 '20 at 16:45

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; 
}

How to prevent different browsers rendering fonts differently?

4 Answers4

Linked