CSS font-weight Property

Description

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 value
normal
Applies to
All elements
Inherited
Yes
Media
Visual
Computed value
Numeric weight value
Animatable
Yes
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.fontWeight

Syntax

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;

Values

  • 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

Example

p.new {
   font-weight: 400;
}
p.old {
   font-weight: lighter;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
312213.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
118410.11Yes