FOIT, FOUT, FUCK

FOIT FOUT FUCK

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

WOFF Weg mit den ollen Font-Formaten!

FOIT Flash of invisible text

FOUT Flash of unstyled text

NÖ

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

nein ist Webfont im localStorage? ja render Text in Systemschrift lade Webfont aus localStorage download Webfont im Hintergrund, speicher in localStorage render Text in Webfont

block swap ≈3s FOIT FOUT

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

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

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

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

Flash of faux text

Liebe Gerda, wir müssen reden. LiebeGerda-Regular.woff 893 KB LiebeGerda-RegularItalic.woff 974 KB LiebeGerda-Bold.woff 1.3 MB LiebeGerda-BoldItalic.woff 1.3 MB

<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

FOCS Flash of Comic Sans

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