normal corresponds to the numeric value 400, and bold corresponds to 700, but a font-family's actual available weights depend entirely on which specific font files were loaded or are installed — requesting a numeric weight, like 500, that a given font doesn't actually provide a distinct file for typically causes the browser to render the nearest weight it does have, rather than genuinely synthesizing an in-between weight, meaning font-weight: 500 might visually look identical to 400 if the font family only ships regular and bold variants.
1Understanding Font-weight
normal corresponds to the numeric value 400, and bold corresponds to 700, but a font-family's actual available weights depend entirely on which specific font files were loaded or are installed — requesting a numeric weight, like 500, that a given font doesn't actually provide a distinct file for typically causes the browser to render the nearest weight it does have, rather than genuinely synthesizing an in-between weight, meaning font-weight: 500 might visually look identical to 400 if the font family only ships regular and bold variants.
Requesting a specific numeric font-weight, like 500 or 600, only actually looks different from the nearest available weight if that font family specifically includes a font file for that weight — check the font's actual available weights, from Google Fonts or wherever it's sourced, rather than assuming every numeric value between 100 and 900 will render distinctly.
h1 {
font-weight: bold;
}
p {
font-weight: normal;
}2Practical Example
Here is a real-world application of Font-weight showing how it is used in production CSS code.
@font-face {
font-family: 'CustomFont';
src: url('custom-400.woff2');
font-weight: 400;
}
.text {
font-family: 'CustomFont';
font-weight: 600;
}3Best Practices
Follow these guidelines when working with Font-weight:
1. Check which specific numeric weights a font family actually provides before relying on an in-between value like 500 or 600 to look visually distinct
2. Load only the specific font-weight values a design actually uses via @font-face or a font service like Google Fonts, rather than the entire available weight range, to reduce page load size
3. Use the bold keyword, or its equivalent 700, as the default choice for standard bold text, reserving finer-grained numeric weights for designs specifically calling for them
Tip: Requesting a specific numeric font-weight, like 500 or 600, only actually looks different from the nearest available weight if that font family specifically includes a font file for that weight — check the font's actual available weights, from Google Fonts or wherever it's sourced, rather than assuming every numeric value between 100 and 900 will render distinctly.
h1 {
font-weight: bold;
}
p {
font-weight: normal;
}