Font weight turns lighter on Mac/Safari

Question

On my last website, the text is perfect naturally on chrome and firefox without touching font-smoothing or anything else.
But on Mac / Safari 7 the text appears well then turns immediately thinner (too much thinner / not nice to read).

After doing some research [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
and some tests playing with

-webkit-font-smoothing    

It looks like Safari display the text first with :

-webkit-font-smoothing: subpixel-antialiased;

Then just after you got the flickering effect, when it is turning font to :

-webkit-font-smoothing: antialiased;

So it seems to me that I had no choice but to force

-webkit-font-smoothing: subpixel-antialiased;

to make my website consistent on all browsers.
I am using font-face Avenir Std Roman.

Some explanations to that Safari problem ? Any better solutions ? Could my font be part of the problem ?

Thanks.

Visitor

According to this answer here, -webkit-font-smoothing is no longer used. Are you saying it still has an effect in Safari? – Rubbing

Of course it is still used ! Effect in all webkit browsers. – Visitor

@MrLister It still has an effect in Safari, today :) – Ferreby

Answer 1

So I fixed my problem with applying:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

Now my font is consistent on every browsers.

Visitor

Yes, but in this way your font is no longer produced with smooth sub pixel rendering. Try to make some tests WITH (default) sub pixel rendering and set all background divs under the font to black. This worked in many of my cases. Also sub pixel rendering is turned off (and therefor font becomes thin) when you switched on css -webkit-backface-visibility: hidden; in some place. In realty the sub pixel font rendering in Safari is very tricky and inconsistent but IS possible in some cases. – Avraham

This solved my problem today, too -- Safari wasn't rendering a Google Font (Lato, 11px, 700 font-weight) the same as FF or Chrome; in fact, Safari appeared to not be using bold text at all. The gray-on-black text appeared to be a different shade of gray, even though it wasn't. Adding this property to my CSS solved things completely. – Frug

That is not a fix, in fact that affects the weight of all the fonts in your site even if they weren't having the issue. That is just lazy coding. – Nib

@JoshuaPekera Rather than calling it lazy, what would you suggest as a solution? – Crabbing

if you use opacity < 1 for your text, then -webkit-font-smoothing: subpixel-antialiased; will not work – Gasperoni

Answer 2

try both

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}

Wirephoto

Setting the stroke actually has a much bigger effect than the smoothing. For some areas this is really great. Thanks! – Prehuman

Answer 3

Just use this: link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"

Instead of this: link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"

problem solved for me this way!

Marylandmarylee

Answer 4

Using -webkit-font-smoothing: subpixel-antialiased worked a little bit, but there was still too much of a difference between Safari, Chrome, and Firefox. I realized trying to make the font thicker in Safari wasn't going to work, so instead I made the font lighter in other browsers and then used a slightly thicker font weight. What ended up normalizing the font weights across browsers for me is this:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Hamner

Answer 5

Try this:

transform: translateZ(0.1px);

Webkit browsers on Mac has known problem with antialiasing 2d and 3d text elements differently. Giving the 3d property to the element usually fixes the problem.

Bainmarie