#font-face declaration for Amstelvar (italic variable font) - html

Question

What's the proper way to define #font-face declarations for Amstelvar italic (variable) font?
Here are the font faces declarations I used:
#font-face {
font-family: 'Amstelvar';
font-weight: 100 900;
font-display: swap;
font-style: normal;
src: url('amstelvar-roman.woff2') format('woff2-variations'),
url('amstelvar-roman.woff2') format('woff2');
}
#font-face {
font-family: 'Amstelvar';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url('amstelvar-italic.woff2') format('woff2-variations'),
url('amstelvar-italic.woff2') format('woff2');
}
Add this is the class I apply to the italic text:
.italic {
font-style: italic,
#supports (font-variation-settings: normal): {
font-variation-settings: 'slnt' -10,
font-style: oblique 10deg,
}
}
Here is the live example.
The word italic has to be italicized in "Test Page with italics and bold" header, but unfortunately, it doesn't have any effect.

Answer 1

Posted this on twitter but figured I'd add it here too:
Found a few things: the subsets of Amstelvar lost their variation axes so aren't behaving properly. Also: it has an italic axis & not slant, & since roman/italic are separate files, you can just use family grouping & font-style: italic Have a look: https://codepen.io/jpamental/pen/wvKdmPp
#font-face {
font-family: 'Amstelvar';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2) format('woff2');
}
#font-face {
font-family: 'Amstelvar';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2) format('woff2');
}
em {
font-style: italic;
}