font-weight
The font-weight CSS property controls the thickness of a font. It is set explicitly with the keyword bold or a number, or relative to the inherited thickness with the keywords bolder or lighter.
Overview
The font-weight CSS property controls the thickness of a font. It is set explicitly with the keyword bold or a number, or relative to the inherited thickness with the keywords bolder or lighter.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 1 | 1 | 18 | 1 | |
| CSS at-rule | ||||||
| The font-weight CSS @font-face descriptor enables authors to specify a single font weight, or a range of font weights, for the font specified in a @font-face at-rule. This is then used by the browser to select the appropriate font when a CSS rule sets a desired font weight. | 4 | 12 | 3.5 | 3.1 | 18 | 2 |
| CSS property | ||||||
bold | 2 | 12 | 1 | 1 | 18 | 1 |
bolder | 2 | 12 | 1 | 1 | 18 | 1 |
lighter | 2 | 12 | 1 | 1 | 18 | 1 |
normal | 2 | 12 | 1 | 1 | 18 | 1 |
number `<number>` syntax | 62 | 17 | 61 | 11 | 62 | 11 |
| Other | ||||||
| The font-weight attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family. | 2 | 12 | 1 | 1 | 18 | 1 |
Syntax
.light { font-weight: 300; }
.regular { font-weight: normal; }
.bold { font-weight: bold; }
.heavy { font-weight: 900; }Live demo
Use cases
Using font-weight
The font-weight CSS property controls the thickness of a font. It is set explicitly with the keyword bold or a number, or relative to the inherited thickness with the keywords bolder or lighter.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features