Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FOIT, FOUT, FUCK
Search
Gunnar Bittersmann
June 28, 2018
Design
0
810
FOIT, FOUT, FUCK
Wie Webfonts auf Webseiten kommen
Typostammtisch Berlin, Pecha-Kucha-Abend
Gunnar Bittersmann
June 28, 2018
Tweet
Share
More Decks by Gunnar Bittersmann
See All by Gunnar Bittersmann
Responsive typography 2
gunnarbittersmann
0
72
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
56
3 Fehler sind zu finden
gunnarbittersmann
0
68
TIL that the future :has already begun
gunnarbittersmann
0
60
TIL how to clear floats
gunnarbittersmann
0
58
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
63
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
65
The color rebeccapurple
gunnarbittersmann
0
79
Mehrsprachige Websites
gunnarbittersmann
0
74
Other Decks in Design
See All in Design
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
0
150
Sociotechnical design for software and human systems
xinyao
1
420
decksh object reference
ajstarks
2
890
Climb Visual Development
rkendrick25
0
100
介護事業にデザインでどう向き合うか / Designship 2023
sms_tech
0
2k
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
0
980
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
250
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
0
110
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
1
160
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
6
4k
Desarrollo de Carrera en Diseño y Producto
solmesz1
0
160
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
24
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Adopting Sorbet at Scale
ufuk
66
8.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Side Projects
sachag
451
41k
Design by the Numbers
sachag
274
18k
Atom: Resistance is Futile
akmur
258
25k
Transcript
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!
None
FOIT Flash of invisible text
FOUT Flash of unstyled text
None
ist Webfont im localStorage? render Text in Webfont lade Webfont
aus localStorage ja nein
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
block swap FOIT FOUT ≈3s
block swap swap ≈0.1s ≈3s font-display: block swap
block swap swap swap fallback fallback ≈0.1s ≈3s font-display: block
swap fallback optional
@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"; });
None
Flash of faux text
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.
<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