LDNWebPerf February 2018 - Oliver Williams

One file, many possibilities: Variable fonts on the web
A session presented by Oliver Williams

On Tuesday, 6th February 2018

Skill level: Beginner / Intermediate

How do you avoid FOUT and FOIT without giving up typographic variation? With variable fonts, a single font file can now provide all the widths and weights you could need.

Transcript

1. one file, many possibilities using variable fonts on the web
3. ❌
4. font-stretch: • ultra-condensed • extra-condensed • condensed • semi-condensed • normal • semi-expanded • expanded • extra-expanded • ultra-expanded
5. variable fonts
6. “wght” “wdth” “ital” “slnt” “opsz”
7. p { font-variation-settings: “BEVL” 450; } p { font-optical-sizing: auto; } whatever
8. @font-face { font-family: 'sourcesans'; src: url(SourceSansVariable-Roman.woff2) format('woff2-variations'); font-weight: normal; font-style: normal; } @font-face { font-family: 'sourcesans'; src: url(SourceSansVariable-Italic.woff2) format('woff2-variations'); font-weight: normal; font-style: italic; } font-display: swap; font-display: swap;
10. STABLE STABLE PREVIEW FLAG
11. <link rel="preload" href="/static/fonts/Lora.woff2" type="font/woff2" as="font" crossorigin> <link rel="preload" href="/static/fonts/Lora.woff2" type="font/woff2" as="font" crossorigin>
14. html { font-family: system-ui; }