CSS font-weight Property

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.

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+

6+

1+

1+

8+

• Share on Facebook
• Share on Twitter
• Share on Google+