Logo with initials
Click me x5 ↓

Variable fonts with Italic on Google Fonts

On one of my projects, the fonts stopped loading. It was trying to load a variable font that supports italics from the Google Fonts API. I got a weird error message:

400: Invalid selector
Value not within axis bounds of ital

So it turns out, there are two ways of dealing with Italics in variable fonts.

  1. The font has an italic axis, (usually from 0 to 1) which lets you control how “slanted” the characters look.
  2. There is a separate italic font file, that is also variable.

My problem was #2, I had to load another file to get my variable font to display italics.

This is what it looked like for me:

/* The "normal/roman" font, with the weight axis ranging from 200 to 800 */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@200..800&display=swap');
/* The second italic font, with the weight axis ranging from 200 to 800 */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@1,200..800&display=swap');

You need both files, otherwise if you omit the first import, only the italic will display.

Share