Upcoming changes to the CSS you need for variable fonts

Two weeks ago I was invited to Berlin for a CSS Working Group three-day meeting. One afternoon was dedicated to resolving issues with the CSS Text and Font modules. Two resolutions in particular will affect the CSS we need to work with variable fonts.

1. Font weights

According to the current CSS Fonts Level 4 specification, this is the basic way to use any webfont (variable or static):

@font-face {
font-family: Gentium;
src: url(gentium.woff);
}
@font-face {
font-family: Gentium;
src: url(gentium.woff);
font-stretch: normal;
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: Gentium;
src: url(gentium.woff);
font-weight: 1 999;
}
@font-face {
font-family: Gentium;
src: url(gentium.woff);
font-weight: 1 999;
font-style: oblique –90 90;
font-stretch: 50% 200%;
}

2. Requiring variable fonts

Variable fonts are not a new font format, they are OpenType fonts that contain additional tables of data which describe variations possible within the font. This means variable fonts are still .ttf or .otf files, and so can be made into WOFF or WOFF2 formats. The upshot is that the font pointed to in the previous @font-face rule may or may not be a variable font, but it could be important to know either way in order that styles requiring variable fonts are applied, and fallback fonts are provided for browsers which don’t support font variations.

@font-face {
font-family: ‘Gentium’;
src: url(gentium-var.woff2) format(‘woff2-variations’),
url(gentium-static.woff2) format(‘woff2’);
}
@font-face {
font-family: ‘Gentium’;
src: url(gentium-var.woff2) format(‘woff2’ supports variations),
url(gentium-static.woff2) format(‘woff2’);
}
@font-face {
font-family: ‘Gentium’;
src: url(gentium-static.woff2) format(‘woff2’),
url(gentium-static.woff) format(‘woff’);
src: url(gentium-var.woff2) format(‘woff2’ supports variations);
}

Cofounder of @clearleft, author of @WebTypography, designer of digital things. Please patronise responsibly.