Font weight turns lighter on Mac/Safari

CssFontsSafariFont Smoothing

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

So I fixed my problem with applying:

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

Now my font is consistent on every browsers.

Solution 2 - Css

try both

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

Solution 3 - Css

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!

Solution 4 - Css

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;

Solution 5 - Css

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.

Categories
Recommended Css Solutions
Recommended Fonts Solutions
Recommended Safari Solutions

Previous Solution:

Are you supposed to have one repository per table in JPA?

JavaJpaSpring Data-JpaSpring Data

Next Solution:

What's the difference between datetime in ISO 8601 and UTC formats in javascript?

JavascriptDateUtcIso8601

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmigswdView Question on Stackoverflow
Solution 1 - CssmigswdView Answer on Stackoverflow
Solution 2 - CssMihir ajagiaView Answer on Stackoverflow
Solution 3 - CssMartin JutrasView Answer on Stackoverflow
Solution 4 - CssGavinView Answer on Stackoverflow
Solution 5 - CssRauli RajandeView Answer on Stackoverflow