A presentation at Berliner Typostammtisch in in Berlin, Germany by Gunnar Bittersmann
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
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
Wie Webfonts auf Webseiten kommen
Pecha-Kucha-Vortrag
The following resources were mentioned during the presentation or are useful additional information.
