@font-face declaration for Amstelvar italic

[iamskok]

What's the proper way to define @font-face declarations for Amstelvar italic font?

Font faces declarations:

@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');
  }

Class to apply be applied for italics:

.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.

[iamskok]

StackOverflow answer