How to use variable fonts in the real world

Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way.

Richard Rutter
Jan 25, 2018 · 7 min read
Variable fonts in action on the Ampersand website

1. Link to the fonts

@font-face {
font-family: 'SourceSans';
src: url('source-sans-variable.ttf') format('truetype');
}
html {
font-family: 'SourceSans', sans-serif;
}

2. Set the weights

.hero { font-weight: 900; }
.blurb { font-weight: 600; }
@font-face {
font-family: 'SourceSans';
src: url('source-sans-variable.ttf') format('truetype');
font-weight: 1 999;
}
b:nth-child(1) { font-weight: 300; }
b:nth-child(2) { font-weight: 250; }
b:nth-child(3) { font-weight: 275; }

3. Subset and create a WOFF2

@font-face {
font-family: 'SourceSans';
src: url('source-sans-variable.woff2') format('woff2');
}

4. Provide fonts for incapable browsers

@font-face {
font-family: 'SourceSans';
src: url('source-sans-variable.woff2') format('woff2-variations');
}
@font-face {
font-family: 'SourceSans';
src: url('source-sans-variable.woff2') format('woff2-variations'),
url('source-sans-regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'SourceSans';
src: url('source-sans-variable.woff2') format('woff2-variations'),
url('source-sans-black.woff2') format('woff2');
font-weight: 900;
}
@font-face {
font-family: 'SourceSansVariable';
src: url('source-sans-variable.woff2') format('woff2');
font-weight: 1 999;
}
@font-face {
font-family: 'SourceSans';
src: url('source-sans-black.woff2') format('woff2'),
url('source-sans-black.woff') format('woff');
font-weight: 900;
}
@font-face {
font-family: 'SourceSans';
src: url('source-sans-semibold.woff2') format('woff2'),
url('source-sans-semibold.woff') format('woff');
font-weight: 600;
}
html {
font-family: 'SourceSans' sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'SourceSansVariable', sans-serif;
}
}
html {
font-family: 'SourceSans' sans-serif;
font-weight: 400;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'SourceSansVariable', sans-serif;
font-variation-settings: "wght" 400;
}
}

Clear(left) Thinking

Opinions and learnings from the team at Clearleft. Find thoughts on everything from design sprints to digital transformation to design leadership to CSS.

Richard Rutter

Written by

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

Clear(left) Thinking

Opinions and learnings from the team at Clearleft. Find thoughts on everything from design sprints to digital transformation to design leadership to CSS.