FOIT, FOUT, FUCK

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

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