My goal is to enable the optical sizing axis of the Piazzolla variable font, served by Google Fonts. The 3 axes for Piazzolla are ital, wght, and opsz. If you are unfamiliar with optical sizing, there's a toggle on the Piazzolla specimen site that turns it off and on.
Right now when you browse variable fonts on Google Fonts, many features and axes are hidden. When you select a font to grab the import code, it doesn't include some features. Some axes are missing. You have to read the Google css2 API documentation and the available axes and just try to figure it out yourself.
There's a CSS Tricks article all about it, but for a different font, Recursive. I tried using some of the examples, but either the Piazzolla font wouldn't load, or italics wouldn't load, or all of the weights wouldn't load.
Here's a codepen for you all to play with: https://codepen.io/drw158/pen/BaZogRx
Here's an example of an import url (without the opsz axis):
https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght@0,100..900;1,100..900&display=swap
How will you know if optical sizing is on? If you are able to include the opsz axis and the italic loads with all the weights (100–900), then you've probably solved it. Make sure you don't have the font locally installed (or you can do that to see what optical sizing looks like).
Thanks!
(I'm the lead ux programs and operations manager for Google Fonts, but I'm answering in my personal capacity; this isn't an official company statement)
It works for me. Here's a fork of your pen that shows optical size set manually and automatically on roman and italic:
https://codepen.io/davelab6/pen/eYRJeqp
The fonts API URL I used was
https://fonts.googleapis.com/css2?family=Piazzolla:ital,opsz,wght@0,8..30,100..900;1,8..30,100..900&display=swap
My guess is that either you didn't order the axes alphabetically, or you didn't add the opsz axis range to both roman and italic tuples.
As explained in https://design.google/library/variable-fonts-are-here-to-stay/
Firefox DevTools has an excellent variable fonts interactive inspection tool, so if you aren't sure what the axes are in the font that you've loaded, you can play with them interactively.