font-weight
The font-weight property sets how bold or light text appears.
Syntax
font-weight: normal | bold | 100..900 | bolder | lighter;
Examples
h1 { font-weight: 700; }
.light { font-weight: 300; }
.variable { font-weight: 550; }
Output
Renders a bold heading, lighter body text, and an intermediate weight when a variable font is loaded.
Notes
Numeric values 1 to 1000 are valid; variable fonts support any value in their range. normal is 400 and bold is 700. The font must include the requested weight or the browser synthesizes it.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 1.0 |
| edge | 12 |