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.

27458e8c0002cdbf98765a8486de954d?s=128

London Web Performance Group

February 06, 2018
Tweet

Transcript

  1. one file, many possibilities using variable fonts on the web

  2. None
  3. font-stretch: • ultra-condensed • extra-condensed • condensed • semi-condensed •

    normal • semi-expanded • expanded • extra-expanded • ultra-expanded
  4. variable fonts

  5. “wght” “wdth” “ital” “slnt” “opsz”

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

    } whatever
  7. @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;
  8. None
  9. STABLE STABLE PREVIEW FLAG

  10. <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>
  11. None
  12. None
  13. html { font-family: system-ui; }

  14. None