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
120
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
85
3 Fehler sind zu finden
gunnarbittersmann
0
140
TIL that the future :has already begun
gunnarbittersmann
0
98
TIL how to clear floats
gunnarbittersmann
0
92
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
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
160
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
NAHO SHIMONO_Portfolio2025
nahohphp
0
850
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
270
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
660
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
1.6k
Starry | Storyboards | Scene 1-21
giofortuna_story
0
290
Haley's adventure chase
ivettetwin
0
230
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
510
Saudade typeface
tiagoporto
0
330
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
210
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Six Lessons from altMBA
skipperchong
28
3.9k
GitHub's CSS Performance
jonrohan
1031
460k
Speed Design
sergeychernyshev
32
1k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
What's in a price? How to price your products and services
michaelherold
246
12k
The Invisible Side of Design
smashingmag
300
51k
Adopting Sorbet at Scale
ufuk
77
9.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
KATA
mclloyd
30
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
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