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.
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