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
1k
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
130
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
87
3 Fehler sind zu finden
gunnarbittersmann
0
150
TIL that the future :has already begun
gunnarbittersmann
0
100
TIL how to clear floats
gunnarbittersmann
0
94
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
110
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
94
The color rebeccapurple
gunnarbittersmann
0
150
Mehrsprachige Websites
gunnarbittersmann
0
96
Other Decks in Design
See All in Design
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
370
harutaka Vision Deck
zenkigenforrecruit
0
170
Liquid Iron
mcduckyart
1
110
Memory Man v3 (WIP)
storybychad
PRO
0
2.2k
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
120
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
310
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
190
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.4k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
280
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
Featured
See All Featured
Done Done
chrislema
184
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Navigating Team Friction
lara
187
15k
For a Future-Friendly Web
brad_frost
179
9.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
A Modern Web Designer's Workflow
chriscoyier
695
190k
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