Font-weight property
Last updated: 2026-09-13
font-weight Font-weight property
The font-weight CSS property sets the thickness of the text. It accepts named keywords as well as numeric values from 1 to 1000, and bold text is commonly used for headings and emphasis.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | all |
| Animation Type | font-weight |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
font-weight: normal | bold | bolder | lighter | <number [1,1000]>;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | bold | bolder | lighter | Keyword | Predefined weight keywords |
<number [1,1000]> | Type | A numeric weight value, e.g. 400 or 700 |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-weight | ✓ v2 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： 400 is equivalent to normal and 700 to bold; these are the two most common values.
Warning： Not every font contains every weight. Missing weights are matched to the nearest available one by the browser, so the rendered result may vary.
❓ FAQ
QWhat do the bolder and lighter keywords mean in font-weight?
AThey are relative keywords: bolder makes the weight one step heavier than the parent element and lighter one step lighter. For example, if the parent is 400, bolder resolves to 700; if the parent is already the heaviest weight, it stays unchanged. They are handy for inherited relative adjustments, but numeric values give more precise control.
QHow do I use numeric values with the font-weight property in CSS?
AThe property accepts numbers from 1 to 1000. Regular fonts usually only provide hundred-point weights (100, 200, ..., 900), where 400 maps to normal and 700 to bold. Variable fonts can take any intermediate value, which also enables animating weight transitions with CSS.
QWhy does font-weight: bold have no visible effect on my text content?
AThe usual causes: the chosen font has no bold face, so the browser substitutes the nearest weight or synthesizes a bold look; or a later rule overrides the declaration. Chinese system fonts typically ship only regular and bold, so values like 800 or 900 snap to bold and look identical.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
