When working with a non-variable font in CSS that only has a few weights available in its font family, the browser substitutes the missing font weights based on the following substitution algorithm, as outlined in the W3 specification:
Font Weight | Substitute Selection Algorithm |
---|---|
100 - 300 |
Weights are checked in the following order till a match is found:
|
400 |
Weights are checked in the following order till a match is found:
|
500 |
Weights are checked in the following order till a match is found:
|
600 - 900 |
Weights are checked in the following order till a match is found:
|
For example, let's suppose you're using the Roboto font with only the following four weights:
@font-face {
font-family: 'Roboto';
src: url('Roboto-Light.ttf') format('truetype');
font-weight: 300;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Bold.ttf') format('truetype');
font-weight: 700;
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Black.ttf') format('truetype');
font-weight: 900;
}
With that in mind, you can consider the following examples with substituted weights in the comments next to each missing font-weight
:
font-weight: 100; /* uses 300 as a substitute */
font-weight: 200; /* uses 300 as a substitute */
font-weight: 300; /* is defined */
font-weight: 400; /* is defined */
font-weight: 500; /* uses 400 as a substitute */
font-weight: 600; /* uses 700 as a substitute */
font-weight: 700; /* is defined */
font-weight: 800; /* uses 900 as a substitute */
font-weight: 900; /* is defined */
Please note that if a font family does not contain a specified font weight, some CSS3-compatible browsers may synthesize the text's appearance to fulfill style requirements (i.e., they will attempt to create the weight themselves).
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.