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 to400),bold(equivalent to700),bolder(relative, one step heavier than the parent),lighter(relative, one step lighter than the parent). - Numeric values: Any number from
1to1000. Historically only multiples of 100 (100through900) were valid, but the CSS Fonts Level 4 specification expanded this to any value in the1–1000range. Note that many validators and older browsers may still only recognize the100–900multiples.
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 100Thin 200Extra Light 300Light 400Normal / Regular 500Medium 600Semi Bold 700Bold 800Extra Bold 900Black
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.
Learn more:
Help us improve our guides
Was this guide helpful?
🌍
Trusted by teams worldwide
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
Scheduled Reports
API Access
Open Source Standards
$7
/ 7 days
Pro Trial
Full Pro access. Cancel anytime.
Start Pro Trial →
Join teams across 40+ countries