cssfontsgoogle-fontsvariable-fonts

How do I use variable fonts with Google Fonts?

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.

    Update 2024: Inter now has true italics

    (Many thanks to Leo for commenting!)
    Variable font version of "Inter" replaced the slant slnt axis with a true italic style and added an optical size opsz axis

    So the current query for italics and all weights would be:

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

    or with the optical size axis included

    https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900

    This change (regarding the font source) may cause some severe issues if you were loading this font family via API relying on the slant axis

    Variable font queries

    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 once provided a slant axes - allowing you to use intermediate slanting angles. Update 2024 The hosted version on google fonts now provides a "proper" italics – which requires to update the query!

    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;
}

/* latin - new inter */
@font-face {
  font-family: 'Inter New';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v18/UcC53FwrK3iLTcvneQg7Ca725JhhKnNqk6L5UUMbm9wUkHU.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+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;
}

.slant2 {
  font-variation-settings: "slnt" -5;
}

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

.italic {
  font-style: italic
}

.interNew{
  font-family: 'Inter New';
}
    <p class="">Hamburgefonstiv 1234 (Inter)</p>
<p class="tight">Hamburgefonstiv 1234 (Inter tight)</p>
<p class="slant">Hamburgefonstiv 1234 (Inter slanted/oblique - slnt:-10)</p>
<p class="slant2">Hamburgefonstiv 1234 (Inter slanted/oblique - slnt:-5)</p>
<p class="tight italic">Hamburgefonstiv 1234 (Inter tight italic)</p>
<p class="interNew italic">Hamburgefonstiv 1234 (true italic!!!)</p>

    Related posts