font-weight
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
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 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.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 sets the weight (or boldness) of the font.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.