$30 off During Our Annual Pro Sale. View Details »

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 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 Slide

  3. WOFF
    Weg mit den
    ollen Font-Formaten!

    View Slide

  4. View Slide

  5. FOIT
    Flash of invisible text

    View Slide

  6. FOUT
    Flash of unstyled text

    View Slide

  7. View Slide

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

    View Slide

  9. 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 Slide

  10. block swap
    FOIT FOUT
    ≈3s

    View Slide

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

    View Slide

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

    View Slide

  13. @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 Slide

  14. 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 Slide

  15. View Slide

  16. Flash of faux text

    View Slide

  17. 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 Slide

  18. 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 Slide

  19. FOCS
    Flash of Comic Sans

    View Slide

  20. 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 Slide