CSS font-weight Property

The font-weight property specifies the thickness of the text.

Text can be displayed in light, normal, bold, bolder, etc.

Values can be built-in names, or a number from 100 - 900.

Example

#

Text with different font weights.

This text is lighter font.

This text is normal font.

This text is bold font.

This text is bolder font.

<p style="font-weight: lighter">
  This text is lighter font.
</p>
<p style="font-weight: normal">
  This text is normal font.
</p>
<p style="font-weight: bold">
  This text is bold font.
</p>
<p style="font-weight: bolder">
  This text is bolder font.
</p>

Note: The font capabilities depend on the font family being used.

Syntax

font-weight: normal | bold | bolder | lighter | 
             number | initial | inherit;

Values

#

Value Description
normal Default. Characters with normal thickness.
bold Thick characters.
bolder Thicker characters.
lighter Lighter characters.
100
200
300
400
500
600
700
800
900
Numeric thickness range: 100 is thinnest, 900 is boldest.
400 = normal.
700 = bold.

Fonts generally don't support all 9 levels.
The browser will use the closest available thickness.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different font-weight values.

font-weight: 300

<style>
  .font-example {
    font-weight: 300;
  }
</style>

<p class="font-example">
  font-weight: 300
</p>

Browser support

This table shows when font-weight support started for each browser.

Chrome
2.0 May 2009
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.3 Apr 2005

You may also like

Guides