# CSS: “font-weight”: “X” is not a “font-weight” value.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-font-weight-x-is-not-a-font-weight-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `font-weight` property controls the boldness or thickness of text characters. Unlike many other CSS properties, it does not accept length units such as `px`, `em`, or `%`. Instead, it uses a specific set of keywords or unitless numeric values to indicate the desired weight. Supplying an unrecognized value causes the declaration to be ignored by the browser, meaning your intended styling won't be applied, and the text will fall back to the inherited or default weight.
The accepted values for `font-weight` are:
- **Keywords:** `normal` (equivalent to `400`), `bold` (equivalent to `700`), `bolder` (relative, one step heavier than the parent), `lighter` (relative, one step lighter than the parent).
- **Numeric values:** Any number from `1` to `1000`. Historically only multiples of 100 (`100` through `900`) were valid, but the CSS Fonts Level 4 specification expanded this to any value in the `1`–`1000` range. Note that many validators and older browsers may still only recognize the `100`–`900` multiples.
This matters for standards compliance and predictable rendering. An invalid `font-weight` value is silently discarded by browsers, which can lead to confusing visual results — especially when you expect a specific weight from a variable font or a multi-weight font family.
To fix this issue, identify the invalid value in your CSS and replace it with one of the accepted values listed above. If you were using a pixel or other unit value, simply remove the unit and choose an appropriate numeric weight. If you used a misspelled keyword (e.g., `bolded` or `heavy`), replace it with the correct keyword.
## Examples
### Incorrect: using a length unit
```css
p {
font-weight: 20px;
}
```
The validator reports this because `20px` is not a valid `font-weight` value. The property does not accept length units.
### Incorrect: using an invalid keyword
```css
h2 {
font-weight: heavy;
}
```
The keyword `heavy` is not recognized by the CSS specification for `font-weight`.
### Correct: using valid numeric values
```css
p {
font-weight: 300;
}
h2 {
font-weight: 700;
}
```
### Correct: using valid keywords
```css
p {
font-weight: lighter;
}
h2 {
font-weight: bold;
}
```
### Full HTML example
```html
Font Weight Example
This text uses a light font weight (300).
This text uses a normal font weight (400).
This text uses a semi-bold font weight (600).
This text uses a bold font weight (700).
```
### Quick reference of common numeric weights
| Value | Typical name |
|-------|-------------|
| `100` | Thin |
| `200` | Extra Light |
| `300` | Light |
| `400` | Normal / Regular |
| `500` | Medium |
| `600` | Semi Bold |
| `700` | Bold |
| `800` | Extra Bold |
| `900` | Black |
Keep in mind that the actual visual effect of a numeric weight depends on whether the loaded font family provides a matching weight. If a font only includes `400` and `700` weights, the browser will map other values to the nearest available weight.