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
880
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
84
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
62
3 Fehler sind zu finden
gunnarbittersmann
0
89
TIL that the future :has already begun
gunnarbittersmann
0
68
TIL how to clear floats
gunnarbittersmann
0
67
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
74
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
69
The color rebeccapurple
gunnarbittersmann
0
88
Mehrsprachige Websites
gunnarbittersmann
0
81
Other Decks in Design
See All in Design
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
260
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2k
改正障害者差別解消法の概要説明
securecat
0
130
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
200
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.2k
Mitra Manual
nnidhz
0
140
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
220
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
340
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
160
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
160
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.4k
Sunny Day Storyboard
ctagulao98
0
190
Featured
See All Featured
Optimizing for Happiness
mojombo
373
69k
Music & Morning Musume
bryan
43
5.9k
A Philosophy of Restraint
colly
200
16k
Facilitating Awesome Meetings
lara
46
5.8k
GitHub's CSS Performance
jonrohan
1026
450k
Building Your Own Lightsaber
phodgson
101
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
4 Signs Your Business is Dying
shpigford
178
21k
KATA
mclloyd
20
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Leading Effective Engineering Teams 2024
addyosmani
3
300
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
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