FOIT, FOUT, FUCK

Transcript

1. FOIT FOUT FUCK

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') }

3. WOFF Weg mit den ollen Font-Formaten!

4. None

5. FOIT Flash of invisible text

6. FOUT Flash of unstyled text

7. None

8. ist Webfont im localStorage? render Text in Webfont lade Webfont

   aus localStorage ja nein

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

10. block swap FOIT FOUT ≈3s

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

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

    swap fallback optional

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; }

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"; });
15. None

16. Flash of faux text

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.

18. <img src="LiebeGerda-600.png" 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

19. FOCS Flash of Comic Sans

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