In this article we’ll explain how to get variable font files from the Google Fonts repository. Read “What are Variable Fonts?” for an explanation of what you can do with variable fonts.

Skip to Cheat Sheet…

How To Get The Variable Font Links From Google Fonts?

Google fonts has over 260 different variable fonts but actually using them can be a bit tricky. Right now, there’s no visual interface for getting the variable font files which means you need to manually change specific URLs in order to get them to work.

Google has its own article: (Loading Variable Fonts on the Web) that provides a partial explanation for loading variable fonts, but leaves out some critical information.

But don’t worry, I’m here to fill in the gaps.

Google Variable Font Instructions

In Google’s article they provide the following example URL…

https://fonts.googleapis.com/css2?family=Oswald:wght@200;700&display=swap

and tell you to replace the “;” with “..” like this…

https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap

Sounds easy. And it is.

Kinda…

Loading Variable Fonts with Italics

Fantasy Novel: Badgerblood Awakening book standing on stone floor.

Looking For An Exciting Fantasy Adventure?

Meet your newest fandom.

Google’s instructions work fine for single-style fonts like Oswald. But as soon as you need a font with italics (which I do 90% of the time) things are slightly less simple.

Making Mistakes

After reading the instructions, I wanted to get the normal and italic variable font for Montserrat.

My first instinct was to simply replace the semicolon with two periods (as implied by Google’s instructions) so I changed 0,100;0,900; into 0,100..0,900 which resulted in an error.

However, through a process of trial and error, I eventually figured out the correct process.

Here it is…

How do you load the normal and italic Variable fonts from Google?

1. Go to fonts.google.com

2. Check the box that says “Show only variable fonts“.

3. Click on a font you want to use. For this example I’ll use Montserrat.

4. Select the thinnest and thickest version of the font for both italic and normal. You should now have 4 fonts variations selected (thin normal, thin italic, bold normal, bold italic). See the yellow box above for reference.

5. Copy the URL (as shown in the screenshot). Paste the URL into a new tab.

You’ll have this link (for Montserrat)…

https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,900;1,100;1,900&display=swap

6. Replace the “;0,” and “;1,” with “..“

The parts to remove are highlighted below..

https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,900;1,100;1,900&display=swap

After you replace it, the code should look like this…

https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

What Does the URL Mean?

0,100 means “normal style, 100 weight”
0,900 means “normal style, 900 weight”
1,100 means “italic style, 100 weight”
1,900 means “italic style, 900 weight”

If we replace “0,100;0,900” with “0,100..900” and replace “1,100;1,900” with “1,100..900” we will get the variable versions of the fonts, which gives us access to all the font weights!

Cheat Sheet: Variable Font Links for Popular Google Fonts

Feeling a little confused? If so, I have a cheat sheet so you don’t have to think too hard…

I’ve compiled a list of variable font URLs that can simply copy and paste it into your website.

Pre-connect Code

To keep things brief, I won’t include the pre-connect code for each font, but you can copy the following code below and add it to any of the fonts below.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Copy and paste any of the following codes into your website’s head code…

Albert Sans (Variable Font Code) 67kb

<link href="https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Albert Sans', sans-serif;

Alegreya (Variable Font Code) 82kb

<link href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
font-family: 'Alegreya', serif;

Andada Pro (Variable Font Code) 68kb

<link href="https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
font-family: 'Andada Pro', serif;

Cabin (Variable Font Code) 55kb

<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
font-family: 'Cabin', sans-serif;

Crimson Pro (Variable Font Code) 95kb

<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
font-family: 'Crimson Pro', serif;

EB Garamond (Variable Font Code) 84kb

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
font-family: 'EB Garamond', serif;

Epilogue (Variable Font Code) 71kb

<link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Epilogue', sans-serif;

Exo 2 (Variable Font Code) 86kb

<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Exo 2', sans-serif;

Fraunces* (Variable Font Code) 83kb

<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Fraunces', serif;

Georama (Variable Font Code) 82kb

<link href="https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Georama', sans-serif;

Inter Tight (Variable Font Code) 76kb
Learn more about this font at rsms.me

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Inter Tight', sans-serif;

Libre Franklin (Variable Font Code) 59kb

<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Libre Franklin', sans-serif;

Merriweather Sans (Variable Font Code) 75kb

<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
font-family: 'Merriweather Sans', sans-serif;

Montserrat (Variable Font Code) 67kb

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Montserrat', sans-serif;

Open Sans (Variable Font Code) 96kb

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
font-family: 'Open Sans', sans-serif;

Overpass (Variable Font Code) 82kb

<link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Overpass', sans-serif;

Public Sans (Variable Font Code) 58kb

<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,900;1,100;1,900&display=swap" rel="stylesheet">
font-family: 'Public Sans', sans-serif;

Playfair Display (Variable Font Code) 73kb

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
font-family: 'Playfair Display', serif;

Roboto Mono (Variable Font Code) 69kb

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
font-family: 'Roboto Mono', monospace;

Raleway (Variable Font Code) 96kb

<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Raleway', sans-serif;

Recursive (Variable Font Code) 290kb
(Read about this font on CSS Tricks)

<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">
font-family: 'Recursive', sans-serif;

Red Hat Text (Variable Font Code) 61kb

<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">
font-family: 'Red Hat Text', sans-serif;

Rubik (Variable Font Code) 69kb

<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
font-family: 'Rubik', sans-serif;

Source Serif 4 (Variable Font Code) 99kb

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
font-family: 'Source Serif 4', serif;

Literata (Variable Font Code) 104kb

<link href="https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
font-family: 'Literata', serif;

Lora (Variable Font Code) 76kb

<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
font-family: 'Lora', serif;

Vollkorn (Variable Font Code) 94kb

<link href="https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
font-family: 'Vollkorn', serif;

Work Sans (Variable Font Code) 94kb

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
font-family: 'Work Sans', sans-serif;

Yrsa (Variable Font Code) 98kb

<link href="https://fonts.googleapis.com/css2?family=Yrsa:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">
font-family: 'Yrsa', serif;

How Did I Find The Sizes For The Google Font Files?

It was surprisingly tricky, since Google doesn’t seem to publish it anywhere (probably because there are so many versions of each font, that there isn’t any one true answer for everyone, so the actual size might depend on your language, browser, OS, etc.).

My figures are based on downloading the normal and italic variable font files using basic Latin characters.

Your results may vary.

So as a bonus, I decided to include the file I used to test the Google Fonts, so you can test any font you want!

How to Test Google Font Files Yourself

  1. Download the font-tester.html file and open it in a text editor..
  2. Add desired Google font files to the header. (see above)
  3. Save your changes.
  4. Open this HTML page in a browser.
  5. Open the Dev Tools (press F12) and go to the network tab.
  6. If you don’t see anything, refresh the page. The browser will tell you the total file size at the bottom.

Loading the Fonts with @font-face

Want even more control over your fonts? Consider grabbing the @font-face directly.

By going the @font-face route, you can control settings like ascent-override and descent-override and even create better fall-back fonts with size-adjust.

If you copy one of the URLs above, you’ll get a long list of @font-face declarations. I generally just grab the “latin” font files since most of my websites are in English. If you need to support other language characters just click on the links and grab the code you need.

Montserrat @font-face

/*-- Load Variable Font --*/
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	ascent-override: 90%;
	descent-override:24%;
	  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	ascent-override: 88%;
	descent-override:24%;
	src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2');
}
body { font-family: 'Montserrat', sans-serif; }

EB Garamond @Font-Face

/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v26/SlGUmQSNjdsmc35JDF1K5GR1SDk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v26/SlGWmQSNjdsmc35JDF1K5GRweDs1Zw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {font-family: 'EB Garamond', serif;}

Georama @font-face

/* latin */
@font-face {
  font-family: 'Georama';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  ascent-override: 82%;
  descent-override:14%;
  src: url(https://fonts.gstatic.com/s/georama/v8/MCoMzAn438bIEyxFf6swMnNpvPcUwW4u4w5QJu4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Georama';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  ascent-override: 82%;
  descent-override:14%;
  src: url(https://fonts.gstatic.com/s/georama/v8/MCoCzAn438bIEyxFVaIC0ZMQ72G6xnvmodYVFuxpFw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

font-family: 'Georama', sans-serif;

Want to Learn More Variable Fonts in Google Fonts

CSS Tricks also has a useful article about Variable Fonts on Google Fonts. They go into even more detail about the nuts and bolts of how variable fonts work.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *