CSS font-weight Property
The font-weight property is used to set the boldness of a font. Some fonts only support normal and bold weights.
| Initial Value | normal |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | CSS1 |
| DOM Syntax | object.style.fontWeight = "bolder"; |
Syntax
Syntax of CSS font-weight Property
css
font-weight: normal | bold | bolder | lighter | number | initial | inherit;Example of the font-weight property:
Example of CSS font-weight Property with bolder value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="bolder">We used a bolder text here.</p>
</body>
</html>Result
Example of the font-weight property with all the values:
Example of CSS font-weight Property with normal, lighter, bold, bolder and number values
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
p.fweight {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="normal">We used normal weight here.</p>
<p class="lighter">This is a lighter weight.</p>
<p class="bold">We used bold weight here.</p>
<p class="bolder">We used a bolder text here.</p>
<p class="fweight">We set font-weight 600 here.</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| normal | Specifies normal weight. This is the default value. | Play it » |
| bold | Specifies a bold weight (equivalent to 700). | Play it » |
| bolder | Specifies a weight one level heavier than the parent element's computed value. | Play it » |
| lighter | Specifies a weight one level lighter than the parent element's computed value. | Play it » |
| 100 200 300 400 500 600 700 800 900 | Sets a numeric weight from thin (100) to bold (900). 400 is equivalent to normal, and 700 is equivalent to bold. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits the property from the parent element. |
Practice
What properties does the CSS 'font-weight' property specify?