Search code examples
cssfontswebfontsgoogle-fonts

Google fonts applying font-weigh:800 when not importing it

I'm importing the size 300 and 400 as per the following:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" media="all">

Yet I still can apply font-weight: 800 and it looks different than font-weight:400 Why? where does it get it from?

Reproduction: https://jsfiddle.net/7164fk3j/

Even when I only import the font-weight 300:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:300" media="all">

Reproduction: https://jsfiddle.net/7164fk3j/1/

How is this working? Is it just making a bold of 300?

Solution

  • Fallback Weights

    font-weight uses fallback weights based on the following algorithm:

    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 heavier 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 heavier
      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 400 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.

    Source

    Synthesis

    This explains how the browser maps weights, but where does it get the actual bold version from?

    There's a CSS property called font-synthesis which provides control over how/when the browser synthesizes aspects of fonts (weight, styles) that are missing.

    The font-synthesis CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser.

    This property isn't implemented in many browsers, but its existence suggests that the browser is synthesizing the bold version when it is missing (and that someday this property will give us control over it).

    Source

    Synthesis Source

    Putting the two concepts above together, it appears that Chrome will use a weight of 300 as the basis for synthesis, but if you import the 400 version, it will use 400 as the basis and yield a slightly thicker result.

    With only 300 weight imported: enter image description here

    With 300 and 400 weights imported: enter image description here

    300, 400, and 800 weights imported: enter image description here