Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LDNWebPerf February 2018 - Oliver Williams

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.

London Web Performance Group

February 06, 2018

More Decks by London Web Performance Group

Other Decks in Technology


  1. font-stretch: • ultra-condensed • extra-condensed • condensed • semi-condensed •

    normal • semi-expanded • expanded • extra-expanded • ultra-expanded
  2. @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;