Font weight gets lighter on Mac / Safari

Question

On my last website, the text is perfect for chrome and firefox without affecting font smoothing or anything else.
But on Mac / Safari 7, the text appears well, and then immediately becomes thinner (too thinner / not good to read).

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

-webkit-font-smoothing 

Looks like Safari displays text first with

 -webkit-font-smoothing: subpixel-antialiased; 

Then, right after you get the flickering effect, when it rotates the font so that:

 -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 site compatible in all browsers.
I am using the font Avenir Std Roman.

Some explanations for this problem Safari? Any better solutions? Can my font be part of the problem?

Thank.

Answer 1

So, I fixed my problem with applying:

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

Now my font is consistent in every browser.

Answer 2

try both

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

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: link href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet"

The problem is solved for me this way!

Answer 4

Using -webkit-font-smoothing: subpixel-antialiased worked a bit, but there was still a big difference between Safari, Chrome and Firefox. I realized that trying to make the font thicker in Safari would not work, so instead I made the font lighter in other browsers and then used a slightly thicker font weight. What ultimately normalizes the font size for browsers for me is this:

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

Answer 5

Try the following:

 transform: translateZ(0.1px); 

Webkit browsers on Mac have found a problem with smoothing 2d and 3d text elements in different ways. Providing a 3d property to an element usually fixes the problem.

Answer 6

the truth is that the solution to this problem (until the apple fixes it) is very simple. Create a css file (example.css) and inside insert this:

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

Then go to Safari> "Preferences"> "Advanced"> "Style Sheet", click it and select the newly created css file. Restart Safari.

TADA !! The problem is solved. Presently