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
980
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
120
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
79
3 Fehler sind zu finden
gunnarbittersmann
0
130
TIL that the future :has already begun
gunnarbittersmann
0
94
TIL how to clear floats
gunnarbittersmann
0
88
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
100
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
90
The color rebeccapurple
gunnarbittersmann
0
140
Mehrsprachige Websites
gunnarbittersmann
0
93
Other Decks in Design
See All in Design
私とデザインの10年
iflection
0
110
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
250
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.4k
Masked shaman-Storyboard 2025
ashley0521
0
280
Dive Deep into Communication
yomtsu
0
260
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
230
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
260
freee + Product Design FY25Q4
freee
4
13k
Cards | Storyboards
giofortuna_story
0
230
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
170
PF_濵村ひろみ_202503
maru_design78
0
150
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.4k
Featured
See All Featured
BBQ
matthewcrist
88
9.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Six Lessons from altMBA
skipperchong
28
3.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Agile that works and the tools we love
rasmusluckow
329
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
How to Ace a Technical Interview
jacobian
276
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Into the Great Unknown - MozCon
thekraken
38
1.8k
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