52

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.

Miguel Bocquier
  • 2,449
  • 5
  • 22
  • 38

5 Answers5

83

So I fixed my problem with applying:

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

Now my font is consistent on every browsers.

Miguel Bocquier
  • 2,449
  • 5
  • 22
  • 38
  • 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 Sep 28 '14 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. – Blazemonger Jan 23 '15 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. – Joshua Pekera Jul 07 '15 at 12:59
  • 15
    @JoshuaPekera Rather than calling it lazy, what would you suggest as a solution? – bob Dec 02 '15 at 00:35
  • 2
    if you use opacity < 1 for your text, then `-webkit-font-smoothing: subpixel-antialiased;` will not work – Saurabh Sharma Sep 11 '16 at 07:07
10

try both

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
Mihir ajagia
  • 185
  • 1
  • 8
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!

Martin Jutras
  • 31
  • 1
2

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;
Gavin
  • 7,544
  • 4
  • 52
  • 72
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.

Rauli Rajande
  • 2,010
  • 1
  • 20
  • 24