While CSS allows you to specify any font weight, whether or not the browser renders it depends on the font family being used. Some fonts, like Arial or Times New Roman, provide only a limited set of weights, such as normal
and bold
. If you specify an unsupported weight, the browser will fall back to the closest available weight.
For instance, if you apply font-weight: 300;
to a font that only supports 400
and 700
, the browser will render the text using the 400
weight.
To avoid surprises, always test the font weights you intend to use. Here is an example of how you can check out the available weights for a font.
By viewing the rendered text, you can verify which weights are supported by each font.
When using web fonts from providers like Google Fonts or Adobe Fonts, review the font's documentation to see which weights are available.