Variable font from Google Fonts doesn't change weight

Question

I'm trying to use variable fonts for the first time, namely Quicksand from Google fonts. Here are the tags it gives you...

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">

It's definitely using Quicksand on the page but the problem is that when I change the font weight from 400 to 500 it doesn't change. 300 does nothing either but if I change it to a value above 550 it seems to go very bold. It's as if I've set it to download just two different weights, a very light one and a very bold one.

I looked around and found an article that said to do this:

<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">

but that doesn't seem to have change anything. Am I missing something?

Answer 1

I found the problem. I was specifying a range of weights which exceeded the range available for this font. Instead of doing this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]" />

I should have used 300..700

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]" />

Also, I wasn't always doing a proper refresh when changing the import because I've got too used to React's hot reloading but obviously if you change the font links in the head then you have to F5.

Answer 2

You aren't importing the font correctly. Here use this instead:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">

On google fonts page you need to select all the font weights you want to import. Not just the base if you want to work with font weights.