CODEWITHSUNDEEP
cssfontssafariwebkitfont-face
novicePrgrmr
novicePrgrmr

Reputation: 19385

Safari bolding a light @font-face font on hover

For some reason Safari is bolding my light @font-face font during transitions.

When you hover over the product images, you can see safari adding boldness to the text after a split second:

http://fine-grain-2.myshopify.com

Here are my @font-face declarations:

@font-face {
font-family: Avenir;
font-weight: normal;
font-style: normal;
src: url("AvenirLTStd-Medium.otf") format("opentype");
}

@font-face {
font-family: AvenirBold;
font-weight: normal;
font-style: normal;
src: url("AvenirLTStd-Black.otf") format("opentype");
}

@font-face {
font-family: AvenirLight;
font-weight: lighter;
font-style: normal;
src: url("AvenirLTStd-Light.otf") format("opentype");
}

Here is where I declare the font-family in the main CSS:

body {
    background: none repeat scroll 0 0 #999999;
    font-family: AvenirLight;
    font-weight: lighter;
}

Upvotes: 2

Views: 3554

Answers (3)

Jules Hugal
Jules Hugal

Reputation: 1

Try to avoid using -webkit-font-smoothing: antialiased;, because font-weights will be inconsistent on different browsers.

I found out that the problem only occurred with a transition for the opacity property. In some cases a rgba background could do the trick.

Upvotes: 0

Andy Allcorn
Andy Allcorn

Reputation: 171

I would imagine your problem is WebKit's antialiasing. Specifically, during transitions or transformations, the antialiasing is whole-pixel only, but when there are no transitions or transformations on the element LCD displays will by default use subpixel antialiasing.

Subpixel antialiasing is usually what you want, as it aids readability, but when something that's been involved in a transition stops, and the subpixel antialiasing takes over, the difference is jarring.

use -webkit-font-smoothing: antialiased; on the problem element only to force whole-pixel antialiasing all the time, and you'll lose that transition. See this page for a great explanation of antialiasing vis-a-vis Safari.

Upvotes: 7

R T
R T

Reputation: 1087

One thing that I could spot there is that at:

@font-face {
    font-family: AvenirLight;
    font-weight: lighter;
    font-style: normal;
    src: url("AvenirLTStd-Light.otf") format("opentype");
}

lighter is not a valid value for the font-weight property. Valid values in this case would be: normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

More details here in section 4.4

Upvotes: 1

Related Questions