Same font except its weight seems different on different browsers

Question

The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?

I was able to fix this in Safari with -webkit-font-smoothing: antialiased;

Chrome:
Chrome

Firefox:
Firefox

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

And a JSFiddle: http://jsfiddle.net/jnxQ8/1/

Generally speaking, the different browsers all handle their own text rendering. If you Google this, you will see a lot of results about browser rendering. Unless there is something quirky in your CSS, chance are you are at the mercy of the different rendering enginers for each associated browser. — Dutchie432, Feb 22 '11 at 19:07
It are screenshot's people. I solved it in Safari with `-webkit-font-smoothing: antialiased;` Now for firefox? — seymar, Feb 22 '11 at 19:14
Definitely the Webkit Font Smoothing declaration in Chrome. It only affects particular fonts, this site posted about it in 2010. http://ilikekillnerds.com/2010/12/a-solution-to-stop-font-face-fonts-looking-bold-on-mac-browsers/ — Dwayne Charrington, Dec 01 '11 at 00:34

score 52 · Accepted Answer · edited Jul 29 '15 at 17:02

52

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:

Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
Using images (resources are demanding and hard to maintain)
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:

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

edited Jul 29 '15 at 17:02

BCDeWitt

4,540
2
21
34

answered Feb 22 '11 at 19:21

vincicat

1,811
1
13
13

9

I don't understand why Chrome and Safari render differently: they're both WebKit-based. – ChrisW Feb 22 '11 at 19:24
1

Yeah, but Chrome apparantly does automatically apply `-webkit-font-smoothing: antialiased;' and Safari doesn't? – seymar Feb 22 '11 at 19:26
1

chrome and safari is similar but not the same browser: they shared same base, webkit, but many platform-specific components and css modules are different - safari support more css3 property than chrome. And font-rendering is quite platform-specific. – vincicat Feb 22 '11 at 19:38
1

@ChrisW - Safari has it's own font rendering engine to give a similar experience as on OSX. Thus the '-webkit-font-smoothing' property will only appear to work on Safari (under Windows). And yet another variable is, you can modify the anti-aliasing in the browser Preferences. – Domokun Oct 19 '11 at 06:43
2

I actually had a problem on two different pages of the same site, with the same CSS applied, rendering different results. The ``font-smoothing: antialiased;`` worked wonders for me. – Kris Selbekk Aug 06 '15 at 08:54
I am still facing problem with Safari - too bold and chrome normal bold. Please give me proper solution. I am using Mac – Devangi Desai Jul 06 '17 at 04:37

score 19 · Answer 2 · answered Jul 18 '13 at 05:56

In order to best standardise your @font-face embedded fonts across browsers try including the below inside your @font-face declaration or on your body font styling:

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

At present there looks to be no universal fix across all platforms and browser builds. As stated frequently all browsers/OS have different text rendering engines.

score 15 · Answer 3 · answered Feb 09 '14 at 03:24

15

There's some great information about this here: https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Still experimenting but so far a minimally invasive solution, aimed only at FF is:

body {
-moz-osx-font-smoothing: grayscale;
}

answered Feb 09 '14 at 03:24

bobzIlla

161
1
5

score 8 · Answer 4 · edited Jul 22 '15 at 04:56

8

Try -webkit-font-smoothing: subpixel-antialiased;

edited Jul 22 '15 at 04:56

ketan

19,129
42
60
98

answered Jul 21 '15 at 10:41

Anne-Pieter Strikwerda

81
1
1

score 6 · Answer 5 · answered Nov 15 '17 at 13:01

I collected and tested discussed solutions:

Windows10 Prof x64:

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini (Mid 2010):

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

Semi (still micro fat in Safari) solved fatty fonts:

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

Have no visual effect

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

Wrong visual effect:

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

do not forget to set !important when testing or be sure that your style is not overridden

How would text-transform fix/break anything? – jontro Oct 10 '18 at 09:25 — jontro, Oct 10 '18 at 09:25

score 3 · Answer 6 · answered Apr 29 '18 at 22:10

I have many sites with this issue & finally found a fix to firefox fonts being thicker than chrome.

You need this line next to your -webkit fix -moz-osx-font-smoothing: grayscale;

body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

Trevor · Answer 7 · 2011-02-22T19:27:10.340

0

I don't think using "points" for font-size on a screen is a good idea. Try using px or em on font-size.

From W3C:

Do not specify the font-size in pt, or other absolute length units. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser).

edited Feb 22 '11 at 19:27

answered Feb 22 '11 at 19:21

Trevor

55,264
2
18
12

But It has nothing to do with the boldness of the font? – seymar Feb 22 '11 at 19:27
1

boldness is controlled by font-smoothing (and the subpixel technique by OS and browser rendering engine) most. – vincicat Mar 02 '11 at 04:46
ON chrome is the same its start on Chrome 20 , chrome 17 whose OK – user956584 Aug 04 '12 at 12:17

score -2 · Answer 8 · answered Oct 09 '14 at 22:58

-2

Try text-rendering: geometricPrecision;.

Different from text-rendering: optimizeLegibility;, it takes care of kerning problems when scaling fonts, while the last enables kerning and ligatures.

answered Oct 09 '14 at 22:58

Jorge

1
1

Same font except its weight seems different on different browsers

8 Answers8

Linked

Related