CODEWITHSUNDEEP
cssfontscross-browser
Atomix
Atomix

Reputation: 2500

How Do I get 'font-weight: lighter' to work in Google Chrome?

There doesn't appear to be any difference between 'font-weight: normal' and 'font-weight: bold' in Google Chrome (and probably Safari). Has anyone found a way to invoke the 'font-weight: thinner' in Chrome the way that Firefox does?

Upvotes: 9

Views: 15036

Answers (3)

Bosh
Bosh

Reputation: 8738

This appears to be a known issue in Chrome fixed in latest development builds:

There is a temporary workaround you can also try:

To enable the font-weight property on a @font-face font which doesn't have a bold font defined, you need to explicitly define font-weight:normal; and font-style:normal; in the @font-face definition. Example:

@font-face {
    font-family: 'GriffosFont Regular';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/GriffosFont.eot');
    src: local('GriffosFont Regular'), local('GriffosFont'), url('fonts/GriffosFont.woff') format('woff'), url('fonts/GriffosFont.\
ttf') format('truetype'), url('fonts/GriffosFont.svg#GriffosFont') format('svg');
}

Upvotes: 4

Fred K
Fred K

Reputation: 13910

Maybe you need to add this to your CSS:

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

Upvotes: 4

teewuane
teewuane

Reputation: 5734

font-weight: lighter; was not working for me so I used font-weight: normal; instead, which worked for my purpose. not sure what's going on with chrome right now...

Upvotes: -2

Related Questions