CSS font-weight Property
Description
The font-weight CSS property is used to control the thickness or boldness of the text characters within an HTML element. It accepts a range of values, including numeric values like 100 (thin) to 900 (extra bold), and keywords like "normal" and "bold." This property allows web developers to adjust the visual weight of text to achieve different typographic styles and emphasize certain content within a webpage. By specifying the appropriate font-weight value, designers can create a visually appealing and readable text hierarchy on their websites.
- Initial value
- normal
- Applies to
- All elements
- Inherited
- Yes
- Computed value
- Numeric weight value
- Animatable
- Yes
- JavaScript syntax
- object.style.fontWeight
Interactive Demo
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.
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;
}Browser Support
The following table will show you the current browser support for the CSS font-weight property.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 2 | 1 | 3.5 | 1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 1st January 2024