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

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 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 class="test">font-weight: 100; </p> 

<p>font-weight: normal;</p> 

<p class="test2">font-weight: bold;</p> 

<p class="test3">font-weight: 900;</p>

.test {
   font-weight: 100;
}
.test2 {
   font-weight: bold;
}
.test3 {
   font-weight: 900;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
3	12	2	1	3.5	1
Tablets / Mobile
1	18	4	10.1	1	Yes

Last updated by CSSPortal on: 1st November 2019