Search code examples
htmlcustomizationwebfontsgoogle-fonts

Google Fonts: How to load specific glyphs for only one of the weights of a loaded set

So, with text= we can specify which glyphs to load.

<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@900&text=HEADER&display=swap" rel="stylesheet">

Also, we can load several weights at the same time:

<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">

What I do not know (and can't find the answer anywhere) is how I can combine those lines. That is: I need the full set of weights 400 and 700, but only specific glyphs for weight 900.

I have tried several combinations, but they do not work. When I simply make the two calls, I get only the weights of the first line. When I combine them in one call, I get only the specified glyphs for all weights.

Examples that do not work:

<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;900&text=HEADER&display=swap" rel="stylesheet">

or

<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Nunito+Sans:wght@900&text=HEADER&display=swap" rel="stylesheet">

Thank you!

Solution

  • Working fine here:

    .nunito { font-family: Nunito Sans }
.w4 { font-weight: 400 }
.w7 { font-weight: 700 }
.w9 { font-weight: 900 }
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@900&text=HEADR&display=swap" rel="stylesheet">
<div class="nunito">
<span class="w4">NOT THE HEADER full set</span><br>
<span class="w7">NOT THE HEADER full set</span><br>
<span class="w9">NOT THE HEADER full set</span>
</div>