varfonts-css_02.css

/*
Exercise 2B: Flexible typeface family
defining instances directly in CSS
*/

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Roman.otf");
    font-style: normal;
}

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf");
    font-style: italic;
}

/* document styles */

body { font-family: "MyFamily"; }
h1 { font-variation-settings: 'wght' 900, 'wdth' 80;  }
h2 { font-variation-settings: 'wght' 700, 'wdth' 80;  }
p  { font-variation-settings: 'wght' 400, 'wdth' 100; }
td { font-variation-settings: 'wght' 400, 'wdth' 80;  }