Same Font Except Its Weight Seems Different on Different Browsers

Same font except its weight seems different on different browsers

Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.

Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.

UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.

However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:

1. Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
2. Using images (resources are demanding and hard to maintain)
3. Replacing Flash (need some programming and doesn't work on iOS)

---

UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:

text-rendering: optimizeLegibility; 

More references here:

1. Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
2. For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.

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.

How to fix font rendering in different browsers?

Try to add -webkit-font-smoothing: antialiased; everywhere where you define your font-family. I don't have a Apple pc so I can't test it for you, but I am sure this will work for you.

Font displays different in Chrome and in Firefox

Update: This is because each browser has its own font rendering engine.

---

I replicated your results with your current sans-serif font. The case also occurred when I changed the font to monospace.

I believe you're better off using a non-system font. For instance, I wanted to see what would happen with a typical Google font such as Open Sans, and I found that the issue did not exist when using it.

By the way, good work on that website. It looks nice. ^{TSM! TSM! TSM!}

---

Related Topics