55

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). enter image description here enter image description here

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.

3
  • According to this answer here, -webkit-font-smoothing is no longer used. Are you saying it still has an effect in Safari?
    – Mr Lister
    Commented Jan 22, 2014 at 14:40
  • Of course it is still used ! Effect in all webkit browsers.
    – migmaker
    Commented Jan 23, 2014 at 8:13
  • @MrLister It still has an effect in Safari, today :)
    – Tien Do
    Commented Mar 27, 2016 at 14:21

5 Answers 5

85

So I fixed my problem with applying:

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

Now my font is consistent on every browsers.

5
  • 1
    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.
    – Garavani
    Commented Sep 28, 2014 at 15:27
  • 2
    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. Commented Jan 23, 2015 at 19:15
  • 1
    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. Commented Jul 7, 2015 at 12:59
  • 16
    @JoshuaPekera Rather than calling it lazy, what would you suggest as a solution?
    – bob
    Commented Dec 2, 2015 at 0:35
  • 2
    if you use opacity < 1 for your text, then -webkit-font-smoothing: subpixel-antialiased; will not work Commented Sep 11, 2016 at 7:07
11

try both

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
1
  • Setting the stroke actually has a much bigger effect than the smoothing. For some areas this is really great. Thanks! Commented Jan 23, 2018 at 16:47
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!

3

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.