1

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?

Hashim Aziz
  • 4,074
  • 5
  • 38
  • 68

2 Answers2

1

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:

Inter seems not to be available in italics btw.

Leo
  • 849
  • 7
  • 20
  • What's the variable axes section? I can't seem to find it anywhere on the Google Fonts page for Inter. – Hashim Aziz Dec 26 '21 at 01:11
  • As for Inter not having italics that makes sense as to why no italic styles are displayed on that page, though it's annoying to to find such a popular font doesn't have true italics. – Hashim Aziz Dec 26 '21 at 01:11
0

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

Peter Constable
  • 2,707
  • 10
  • 23