The font-weight property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

  • Initial valuenormal
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueNumeric weight value
  • AnimatableYes
  • CSS VersionCSS1, CSS2, CSS3
  • JavaScript syntaxobject.style.fontWeight
Formal syntax: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
  • normalNormal font weight. Same as 400.
  • boldBold font weight. Same as 700.
  • bolderSpecifies a bolder weight than the inherited value.
  • lighterSpecifies a lighter weight than the inherited value.
  • 100, 200, 300, 400, 500, 600, 700, 800, 900Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, a face with a nearby weight is used.
  • inherit
p.new {
   font-weight: 400;
}
p.old {
   font-weight: lighter;
}

Click the button below to experiment with this property.

Give it a Try!

1+Firefox6+Explorer1+Chrome1+Safari8+Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.