HTML check: CSS: “font-weight”: “X” is not a “font-weight” value.

About This CSS Issue

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

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

h2 {
  font-weight: heavy;
}

The keyword heavy is not recognized by the CSS specification for font-weight.

Correct: using valid numeric values

p {
  font-weight: 300;
}

h2 {
  font-weight: 700;
}

Correct: using valid keywords

p {
  font-weight: lighter;
}

h2 {
  font-weight: bold;
}

Full HTML example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Weight Example</title>
  <style>
    .light {
      font-weight: 300;
    }
    .regular {
      font-weight: normal;
    }
    .semi-bold {
      font-weight: 600;
    }
    .bold {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p class="light">This text uses a light font weight (300).</p>
  <p class="regular">This text uses a normal font weight (400).</p>
  <p class="semi-bold">This text uses a semi-bold font weight (600).</p>
  <p class="bold">This text uses a bold font weight (700).</p>
</body>
</html>

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.

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Learn more:

MDN Reference

MDN: font-weight

→

Help us improve our guides

Was this guide helpful?