FOIT, FOUT, FUCK

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

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!
5. FOIT Flash of invisible text
6. FOUT Flash of unstyled text
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"; });
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