variable fonts in CSS, exercise 1

varfonts-css_00.css

/*
Exercise 1:
Using a typeface packaged as 2 variable fonts (Roman/Italic), to style a simple document with 3 levels of information (headline, body text and small text).
We'll make 3 style-linked families, one for each info level: "MyFamily Text", "MyFamily Headline" and "MyFamily Caption".
The first two families will use **named instances** contained in the font.
The third family (Caption) will be created with custom instances defined numerically in the CSS.
*/

/* ---------------------
family 1: body text
style-linked RIBBI family
made from 2 variable fonts (roman/italic)
using named instances
--------------------- */

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

@font-face {
    font-family: "MyFamily Text";
    /* get named instance (same syntax as IDs in svg fonts) */
    src: url("MyVariableFont-Roman.woff#Bold");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "MyFamily Text";
    /* different variable font (italic) */
    src: url("MyVariableFont-Italic.woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "MyFamily Text";
    src: url("MyVariableFont-Italic.woff#Bold");
    font-weight: bold;
    font-style: italic;
}

/* ---------------------
family 2: headlines
style-linked RIBBI family
made from the same 2 variable fonts
using named instances
--------------------- */

@font-face {
    font-family: "MyFamily Headline";
    src: url("MyVariableFont-Roman.woff#Condensed");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MyFamily Headline";
    src: url("MyVariableFont-Roman.woff#Condensed-Bold");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "MyFamily Headline";
    src: url("MyVariableFont-Italic.woff#Condensed");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "MyFamily Headline";
    src: url("MyVariableFont-Italic.woff#Condensed-Bold");
    font-weight: bold;
    font-style: italic;
}

/* ---------------------
family 3: caption
style-linked RIBBI family
made from the same 2 variable fonts
using custom instances
--------------------- */

@font-face {
    font-family: "MyFamily Caption";
    src: url("MyVariableFont-Roman.woff");
    font-variation-settings: 'wght' 450, 'wdth' 120, 'cntr' 95;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MyFamily Caption";
    src: url("MyVariableFont-Roman.woff");
    font-variation-settings: 'wght' 750, 'wdth' 120, 'cntr' 95;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "MyFamily Caption";
    src: url("MyVariableFont-Italic.woff");
    font-variation-settings: 'wght' 750, 'wdth' 120, 'cntr' 95;
    font-weight: normal;
    font-style: italic;
}

/* --- document styles --- */

p          { font-family: "MyFamily Text"; }
h1, h2, h3 { font-family: "MyFamily Headline"; }
small      { font-family: "MyFamily Caption"; }