FOIT, FOUT, FUCK

FOIT, FOUT, FUCK

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

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

June 28, 2018
Tweet

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