How do I use variable fonts with Google Fonts?

Issue

Unlike traditional fonts that require a file for each weight (300, 400, 500, etc.), variable fonts allow you to access every combination of the font's weights and styles through a single (smaller) font file. This has obvious benefits for the web, and I'm trying to use the Inter font from Google Fonts, which both Google and the designer's website claim to be a variable font.

However when selecting the font in Google Fonts I'm still required to select the individual weights that I want to use, and the generated <link> tag also specifies individual weights, suggesting that it's downloading each of those files:

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

I've also noticed that it doesn't seem to come with italics, and when I try to render italics it simulates them with faux italics, which I confirmed by adding the CSS rule font-synthesis:none:

font-style: italic;
font-synthesis: none ; /* Disables faux italics and other simulated styles: 
                          if no italic style is installed, defaults to normal

Why is this, and how can I use the variable version of Inter via Google Fonts, including italics?

Solution

Variable font query tuples

You need to use the appropriate query tuples to retrieve the variable font version – otherwise google fonts will return static font-file URLs.

https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900  

Notice the ".." separators defining the axes ranges.
You can check the result by opening the CSS link. If everything is correct you should see something like this:

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
}

(Most notably weight and style properties have multiple values like font-weight: 100 900).

Inter genuine italic vs. slanted/oblique

Inter variable provides a slant axes - allowing you to use intermediate slanting angles.
Besides, there's the "Inter Tight" (using a tighter tracking/letter-spacing) also providing an italic.
Although, there are probably more subtle differences between both "siblings" - when adding some letter-spacing to the Inter tight it is hardly distinguishable from the standard Inter.
The same applies to the slanted/oblique style in Inter compared to the italic style available in Inter Tight – you could argue whether this italic can be considered a "true" italic.

/* latin */

@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/intertight/v7/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, 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: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/intertight/v7/NGSyv5HMAFg6IuGlBNMjxLsCwapkRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: 'Inter';
  font-size: 5vmin;
}

.slant {
  font-variation-settings: "slnt" -10;
}

.tight {
  font-family: 'Inter Tight';
  letter-spacing: 0.055em
}

.italic {
  font-style: italic
}

<p class="">Hamburgefonstiv 1234 (Inter)</p>
<p class="tight">Hamburgefonstiv 1234 (Inter tight)</p>
<p class="slant">Hamburgefonstiv 1234 (Inter slanted/oblique)</p>
<p class="tight italic">Hamburgefonstiv 1234 (Inter tight italic)</p>

More about google font UI's quirks: "Google Fonts - variable fonts not working in Windows browsers"

Answered By - herrstrietzel