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.
- The font has an italic axis, (usually from 0 to 1) which lets you control how “slanted” the characters look.
- 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.