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. one file, many possibilities
    using variable fonts on the web

    View full-size slide

  2. font-stretch:
    • ultra-condensed
    • extra-condensed
    • condensed
    • semi-condensed
    • normal
    • semi-expanded
    • expanded
    • extra-expanded
    • ultra-expanded

    View full-size slide

  3. variable fonts

    View full-size slide

  4. “wght”

    View full-size slide

  5. p {
    font-variation-settings: “BEVL” 450;
    p {
    font-optical-sizing: auto;

    View full-size slide

  6. @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;

    View full-size slide


    View full-size slide

  8. type="font/woff2" as="font" crossorigin>
    type="font/woff2" as="font" crossorigin>

    View full-size slide

  9. html {
    font-family: system-ui;

    View full-size slide