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 Slide

  2. View Slide

  3. View Slide

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

    View Slide

  5. variable fonts

    View Slide

  6. “wght”

    View Slide

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

    View Slide

  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;

    View Slide

  9. View Slide


    View Slide

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

    View Slide

  12. View Slide

  13. View Slide

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

    View Slide

  15. View Slide