Search code examples
fontsrenderingdevtools

"Nunito ExtraLight" instead of "Nunito" in Dev tools rendered font info

Can someone explain me why in this case Chrome renders Nunito ExtraLight which is not defined anywhere?

Source code:

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
body {
  font-family: "Nunito", sans-serif;
}
TEXT

Chrome DevTools:

Why Nunito ExtraLight?

I tried this:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap');

But result was: Nunito ExtraLight Medium

Can someone explain to me what I'm doing wrong? I don't wanna ExtraLight font.

Solution

  • Browser usage: font-family name stored in a font file don't matter

    As long as a google font css query returns valid @font-face rules (correctly mapping different styles/weights) – just ignore this matter.

    Sure, it is slightly confusing to see rendered font names in dev tools like:

    • "Nunito ExtraLight" light
    • "Nunito ExtraLight" Regular
    • "Nunito ExtraLight" Medium

    weight200
    weight800

    where the "intrinsic" font-family name as specified in the woff2/woff/truetype name records also includes a term like "ExtraLight" that should be preserved for style/weight info.

    However, it doesn't matter as the browser only cares about a valid @font-face rule mapping a specific font file to:

    1. a font-family
    2. font-style (regular or italic)
    3. font-weight (e.g 100–900)

    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900');
body {
  font-family: 'Nunito'
}

.w200 {
  font-weight: 200
}

.w300 {
  font-weight: 300
}

.w400 {
  font-weight: 400
}

.w500 {
  font-weight: 500
}

.w600 {
  font-weight: 600
}

.w700 {
  font-weight: 700
}

.w800 {
  font-weight: 800
}

.w900 {
  font-weight: 900
}
    <p class="w200">Hamburgefons</p>
<p class="w300">Hamburgefons</p>
<p class="w400">Hamburgefons</p>
<p class="w500">Hamburgefons</p>
<p class="w600">Hamburgefons</p>
<p class="w700">Hamburgefons</p>
<p class="w800">Hamburgefons</p>
<p class="w900">Hamburgefons</p>

    google fonts API requests are dynamic

    In other words: the exact same google fonts css URL might return different file sources after e.g. 2 years.
    ... not to speak of "browser sniffing" – for instance returning static instead of variable fonts when using Opera (maybe the user agent lookup is still based on old presto rendering engine data?)

    So you can safely ignore this issue – this might be more significant when employing fonts for native apps.

    The Nunito also caused some confusion due to its sibling the "Nunito Sans". Both fonts shouldn't be confused.