How do I use variable fonts with Google Fonts?

Question

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?

Answer 1

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,[email protected],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"

Answer 2

Google Fonts does allow you to load a variable font in your site, not specific weights. For more info, see:

https://fonts.google.com/knowledge/using_type/loading_variable_fonts_on_the_web

Answer 3

Google Fonts lets you choose a non-standard value in the Variable axes section, but you still need to input the value/s as google serves smaller and specific files to avoid large requests, it also approximates them.

For example by picking 401 and 410 you get the exact same file as a response (the only difference is the font-weight in the style).

Check them:

• https://fonts.googleapis.com/css2?family=Inter:wght@401&display=swap
• https://fonts.googleapis.com/css2?family=Inter:wght@410&display=swap

Inter seems not to be available in italics btw.

Answer 4

Try overriding all of your tags that should render as italic:

em,
i {
    font-style: normal;
    font-variation-settings: "slnt" -10;
}

I guess you could still call this "Faux" italics... but now it's not the browser taking a wild guess at how to render it... you're in control.

I tried to make a Stack Overflow snippet example, but it does not seem to be possible to run Google Fonts as an external library, so here's a codepen instead:

https://codepen.io/squarecandy-1472176736/pen/GRebKRY