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.
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.
font-weight: normal | bold | bolder | lighter |
number | initial | inherit;
| 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. |
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>
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 |
