Italics in variable font support

Question

I am having trouble switching from normal font style to italics with a web font.

When I use font variation settings I only get the normal style :

font-variation-settings: 'wght' 400, 'ital' 1;

I am using a Google font called Petrona with @font-ace.

Here is how I call the fonts in CSS :

@font-face {
    font-family: 'Petrona';
    src: url('fonts/petrona/Petrona-VariableFont_wght.ttf') format('woff2 supports variations'),
       url('fonts/petrona/Petrona-VariableFont_wght.ttf') format('woff2-variations');
    font-weight: 1 900;
    font-style: normal;
}

@font-face {
    font-family: 'Petrona';
    src: url('fonts/petrona/Petrona-Italic-VariableFont_wght.ttf') format('woff2 supports variations'),
       url('fonts/petrona/Petrona-Italic-VariableFont_wght.ttf') format('woff2-variations');
    font-weight: 1 900;
    font-style: italic;
}

body {
    font-family: Petrona;
    font-variation-settings: 'wght' 400, 'ital' 1;
}

If I remove the first @font-face declaration I do get my italics... But then if I try :

font-variation-settings: 'wght' 400, 'ital' 0;

I still get the italics...

I have read this article, but I can't seem to see where I am going wrong.

Answer 1

Italic isn't implemented in this family as a variation. Italic and Roman are in two different variable fonts. For the font family 'ital' is relevant as a design axis, but not as a variation axis. Setting font-variation-setting for 'ital' won't have any effect since the fonts don't have an 'ital' variation.