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
920
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
89
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
63
3 Fehler sind zu finden
gunnarbittersmann
0
100
TIL that the future :has already begun
gunnarbittersmann
0
74
TIL how to clear floats
gunnarbittersmann
0
71
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
82
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
70
The color rebeccapurple
gunnarbittersmann
0
93
Mehrsprachige Websites
gunnarbittersmann
0
84
Other Decks in Design
See All in Design
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
4
610
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
160
MLP_Cleanup_Olga
olgastoryboard
0
130
root COMPANY DECK / We are hiring!
root_recruit
1
14k
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
1
2.3k
アフォーダンスとシグニファイア
ryokanakai
0
280
Speed Design
sergeychernyshev
23
540
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
1
1k
Arborea Art Book
thebogheart
1
240
Картирование процесса фасилитация стратсессий с Картой гипотез при помощи Карты процесса-опыта
ashapiro
0
350
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
200
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
450
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Practical Orchestrator
shlominoach
186
10k
What's new in Ruby 2.0
geeforr
342
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
KATA
mclloyd
29
13k
Documentation Writing (for coders)
carmenintech
65
4.4k
How GitHub (no longer) Works
holman
311
140k
Unsuck your backbone
ammeep
668
57k
Ruby is Unlike a Banana
tanoku
96
11k
Designing the Hi-DPI Web
ddemaree
280
34k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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