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

FOIT, FOUT, FUCK

FOIT, FOUT, FUCK

Wie Webfonts auf Webseiten kommen
Typostammtisch Berlin, Pecha-Kucha-Abend

Gunnar Bittersmann

June 28, 2018
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

Transcript

  1. FOIT
    FOUT
    FUCK

    View full-size slide

  2. @font-face
    {
    font-family: 'What The Font';
    font-weight: normal;
    font-style: normal;
    src: url('wtf.eot');
    src:
    url('wtf.eot?#iefix') format('embedded-opentype'),
    url('wtf.woff2') format('woff2'),
    url('wtf.woff') format('woff'),
    url('wtf.ttf') format('truetype'),
    url('wtf.svg#wtf') format('svg')
    }

    View full-size slide

  3. WOFF
    Weg mit den
    ollen Font-Formaten!

    View full-size slide

  4. FOIT
    Flash of invisible text

    View full-size slide

  5. FOUT
    Flash of unstyled text

    View full-size slide

  6. ist Webfont im
    localStorage?
    render Text
    in Webfont
    lade Webfont
    aus localStorage
    ja
    nein

    View full-size slide

  7. ist Webfont im
    localStorage?
    render Text
    in Systemschrift
    render Text
    in Webfont
    lade Webfont
    aus localStorage
    download Webfont
    im Hintergrund,

    speicher in localStorage
    ja
    nein

    View full-size slide

  8. block swap
    FOIT FOUT
    ≈3s

    View full-size slide

  9. block swap
    swap
    ≈0.1s ≈3s
    font-display:
    block
    swap

    View full-size slide

  10. block
    swap
    swap
    swap
    fallback
    fallback
    ≈0.1s ≈3s
    font-display:
    block
    swap
    fallback
    optional

    View full-size slide

  11. @font-face
    {
    font-family: 'What The Font';
    font-weight: normal;
    font-style: normal;
    src:
    url('wtf.woff2') format('woff2'),
    url('wtf.woff') format('woff');
    font-display: optional;
    }

    View full-size slide

  12. CSS Font Loading API
    var wtfFace = new FontFace("What the Font", "url(wtf.woff)", {});
    wtfFace.load().then(function (loadedFace) {
    document.fonts.add(loadedFace);
    document.body.style.fontFamily = "What the Font, sans-serif";
    });

    View full-size slide

  13. Flash of faux text

    View full-size slide

  14. LiebeGerda-Regular.woff 893 KB
    LiebeGerda-RegularItalic.woff 974 KB
    LiebeGerda-Bold.woff 1.3 MB
    LiebeGerda-BoldItalic.woff 1.3 MB
    Liebe Gerda,

    wir müssen reden.

    View full-size slide

  15. srcset="LiebeGerda-1200.png 1200w,
    LiebeGerda-900.png 900w"
    alt="Liebe Gerda,
    wir müssen reden."/>
    LiebeGerda-1200.png 27.3 KB
    LiebeGerda-900.png 18.4 KB
    LiebeGerda-750.png 14.4 KB
    LiebeGerda-600.png 10.8 KB

    View full-size slide

  16. FOCS
    Flash of Comic Sans

    View full-size slide

  17. Die Art des Inhalts und der Interaktionen
    setzen gewisse Grenzen; die Bedürfnisse
    und Ziele der Nutzer setzen andere. 

    Die Tätigkeit des Webdesigns besteht nun
    darin, diese Grenzen auszuloten und in
    Einklang zu bringen.
    — Laura Kalbag, Accessibility for Everyone

    View full-size slide