Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
FOIT, FOUT, FUCK
Gunnar Bittersmann
June 28, 2018
Design
0
560
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
Früchte des Zorns
gunnarbittersmann
0
5
TIL about coming downstairs
gunnarbittersmann
0
12
ISO 9241 – Ergonomie der Mensch-System-Interaktion
gunnarbittersmann
0
41
TIL :where the fun :is
gunnarbittersmann
0
13
What a kerning!
gunnarbittersmann
0
19
TIL where no one has gone before
gunnarbittersmann
0
15
What a RegExp!
gunnarbittersmann
0
19
CSSBattle at CSS Café
gunnarbittersmann
0
21
TIL about XHTML + ab. CSS escapes + about SVG in JS
gunnarbittersmann
0
53
Other Decks in Design
See All in Design
Monster in the Closet
laineyru
1
160
A_Yajima
a_yajima
1
4.7k
ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode
featherplain
2
480
Bertha
yvonnehsuanho
PRO
1
300
Misconceptions of Design Thinking
yosukeonishi
3
350
クラスメソッドアプリデザインドリルver1
cmdesignteam
1
1.4k
はじめまして、株式会社サインコサインです。(2022.04)
kakukoki
PRO
2
3.2k
エアデザイン(AIR Design)サービス資料
air_design
0
30k
Nel: A Limbo Odessy
educe_art
0
150
Episode 2 Onyx Monster Mysteries part 2
ivettetwin
1
250
どうしてアジャイル会社で デザイン部が必要なのか? (RSGT, January 2022)
chostett
0
2.4k
Overflow - IdentityDeck
overflowinc
0
2.4k
Featured
See All Featured
Visualization
eitanlees
124
11k
Why Our Code Smells
bkeepers
PRO
324
54k
The Language of Interfaces
destraynor
148
20k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Automating Front-end Workflow
addyosmani
1351
200k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Three Pipe Problems
jasonvnalue
89
8.6k
Code Reviewing Like a Champion
maltzj
506
37k
Designing for humans not robots
tammielis
241
23k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.3k
Music & Morning Musume
bryan
35
4.2k
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