varfonts-css_01.css

/*
Exercise 2: Flexible typeface family
mapping named instances in a variable font w/ width & weight axes
to CSS font-weight / font-style / font-stretch properties
*/

/* Regular */

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

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

/* Regular Condensed */

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Roman.otf#Condensed");
    font-style: normal;
    font-weight: 400;
    font-stretch: condensed;
}

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf#Condensed");
    font-style: italic;
    font-weight: 400;
    font-stretch: condensed;
}

/* Bold */

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

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf#Bold");
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
}

/* Bold Condensed */

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Roman.otf#Bold-Condensed");
    font-style: normal;
    font-weight: 700;
    font-stretch: condensed;
}

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf#Bold-Condensed");
    font-style: italic;
    font-weight: 400;
    font-stretch: condensed;
}

/* Light */

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

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf#Light");
    font-style: italic;
    font-weight: 300;
    font-stretch: normal;
}

/* Light Condensed */

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Roman.otf#Light-Condensed");
    font-style: normal;
    font-weight: 300;
    font-stretch: condensed;
}

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf#Light-Condensed");
    font-style: italic;
    font-weight: 300;
    font-stretch: condensed;
}

/* Black */

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

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf#Black");
    font-style: italic;
    font-weight: 900;
    font-stretch: normal;
}

/* Black Condensed */

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

@font-face {
    font-family: "MyFamily";
    src: url("MyVariableFont-Italic.otf#Black");
    font-style: italic;
    font-weight: 900;
    font-stretch: normal;
}

/* document styles */

body { font-family: "MyFamily"; }
h1 { font-weight: 900; font-stretch: condensed; }
h2 { font-weight: 700; font-stretch: condensed; }
p  { font-weight: 400; font-stretch: normal; }
td { font-weight: 400; font-stretch: condensed; }