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
960
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
99
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
75
3 Fehler sind zu finden
gunnarbittersmann
0
120
TIL that the future :has already begun
gunnarbittersmann
0
87
TIL how to clear floats
gunnarbittersmann
0
80
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
93
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
80
The color rebeccapurple
gunnarbittersmann
0
120
Mehrsprachige Websites
gunnarbittersmann
0
90
Other Decks in Design
See All in Design
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
610
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
160
Museum Heist
allykae
0
120
マンガで分かるサービスデザインガイドライン
senryakuka
1
520
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
120
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
0
220
横断組織デザイナーの働き方
mixi_design
PRO
0
330
LayerX DesignersDeck
layerx
PRO
0
2.4k
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
510
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building Applications with DynamoDB
mza
93
6.2k
Bash Introduction
62gerente
610
210k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing for Performance
lara
604
68k
The Cult of Friendly URLs
andyhume
78
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Visualization
eitanlees
146
15k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Designing Experiences People Love
moore
139
23k
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