0

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:wght@100..900&display=swap" rel="stylesheet">

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

jonhobbs
  • 26,684
  • 35
  • 115
  • 170

2 Answers2

2

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:wght@200..900" />

I should have used 300..700

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700" />

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.

jonhobbs
  • 26,684
  • 35
  • 115
  • 170
0

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.

John
  • 5,132
  • 1
  • 6
  • 17
  • 1
    So I'm confused. What is the point in a variable font then? – jonhobbs Dec 07 '20 at 18:10
  • Loading fonts actually take a lot to do, you can't import an infinate amount of fonts weights from google, so the variable is for you to choose on Google's page and to import that custom font weight. – John Dec 07 '20 at 18:13
  • 2
    I think we may be talking at cross purposes. I'm talking about variable fonts which allow you to download a single font and set any weight.... – jonhobbs Dec 07 '20 at 19:13
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide – jonhobbs Dec 07 '20 at 19:13