How Is Missing CSS font-weight Substituted by the Browser?

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:

  1. Weights below the specified weight are checked in descending order;
  2. Weights above the specified weight in ascending order.
400

Weights are checked in the following order till a match is found:

  1. 500 is checked first;
  2. Weights below 400 are checked in descending order (i.e. 300 - 100);
  3. Weights above 500 in ascending order (i.e. 600 - 900).
500

Weights are checked in the following order till a match is found:

  1. 400 is checked first;
  2. Weights below 400 are checked in descending order (i.e. 300 - 100);
  3. Weights above 500 in ascending order (i.e. 600 - 900).
600 - 900

Weights are checked in the following order till a match is found:

  1. Weights above the specified weight are checked in ascending order;
  2. Weights below the specified weight in descending order.

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.