Search code examples
csscross-browserwebfonts

What do browsers do when a font weight is unavailable?

If I load a google font that comes with 400 and 700 weights, but in my CSS I use font-weight:550; what does the browser do ?

Solution

  • According to MDN and W3.org:

    If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:

    • If a weight greater than 500 is given, the closest available darker weight is used (or, if there is none, the closest available lighter weight).
    • If a weight less than 400 is given, the closest available lighter weight is used (or, if there is none, the closest available darker weight).
    • If a weight of exactly 400 is given, then 500 is used. If 500 is not available, then the heuristic for font weights less than 500 is used.
    • If a weight of exactly 500 is given, then 400 is used. If 400 is not available, then the heuristic for font weights less than 400 is used.

    This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

    Also:

    There is no guarantee that there will be a darker face for each of the 'font-weight' values; for example, some fonts may have only a normal and a bold face, while others may have eight face weights. There is no guarantee on how a UA will map font faces within a family to weight values. The only guarantee is that a face of a given value will be no less dark than the faces of lighter values.