CODEWITHSUNDEEP
css
presidio
presidio

Reputation: 45

font-weight property does not seem to work on any browser

I'm having an issue with the font-weight property, it might be an obvious fix but I cant seem to figure it out, any help would be appreciated.

body
{
    font-family: charcoal, arial, sans-serif;
    font-size:small;
    font-weight:lighter;
}

This is the font that I cam trying to set for a page, however the font-weight property doesnt seem to be doing anything at all, in any browsers. It seems to stay at the default weight and whether I use lighter, bold or 300 it has no effect at all on the font. I've also tried this with the Impact font and I had the same problem. Any tips?

Upvotes: 2

Views: 550

Answers (4)

harley_woop
harley_woop

Reputation: 1849

See http://codepen.io/hwg/pen/uqELh - It clearly, as you mention, won't work.

I think this is because neither Impact, Charcoal, or Arial have a lighter weight than they already use, and your browser cannot "faux-light" the font.

Arial of course does have a bolder face, but if you have the desired font installed, then it obvously wont be shown.

This can't be changed- try another font such as Open Sans. Or Oswald for the "Impact" style.

Upvotes: 3

Peter O.
Peter O.

Reputation: 32908

Most browsers don't support synthesizing a lighter version of a font (using 300 or a lighter weight for font-weight) as is possible in some browsers with emboldening it (using bolder or 700 as the font-weight). Since Impact and probably Charcoal has only one weight, the "lighter" weight of the font will look the same in most browsers.

CSS Fonts Level 3 says:

Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family.

But there is no similar note for lighter versions of a typeface.

Upvotes: 1

Scott
Scott

Reputation: 21888

Many fonts only have 1 weight. Impact only has one weight. I can't speak for Charcoal specifically, but I'd guess there's only one weight of that font as well. CSS won't create faux bold if there is no bold face for the type.

Upvotes: 1

Stanisław Chmiela
Stanisław Chmiela

Reputation: 481

Maybe the font just doesn't have the specified weight?

Upvotes: -1

Related Questions