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
910
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
62
3 Fehler sind zu finden
gunnarbittersmann
0
100
TIL that the future :has already begun
gunnarbittersmann
0
73
TIL how to clear floats
gunnarbittersmann
0
71
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
81
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
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
muture
1
600
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
260
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
1
2.2k
AIイラスト生成・編集テクニック紹介
piyo7
2
230
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.2k
『データモデリングでドメインを駆動する』で繋がる体験 / Drive domain with data modeling
tunemage
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
3
560
Night Shift concept 9/15/2024
cpineda57
0
730
RIDLEY JONES - Ridley's Christmas Carol
serenascipio
1
160
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
2
210
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
350
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
1.9k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How to Ace a Technical Interview
jacobian
275
23k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
48k
Being A Developer After 40
akosma
84
590k
Art, The Web, and Tiny UX
lynnandtonic
295
20k
Practical Orchestrator
shlominoach
185
10k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
Typedesign – Prime Four
hannesfritz
39
2.3k
Fireside Chat
paigeccino
32
2.9k
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