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
970
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
110
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
78
3 Fehler sind zu finden
gunnarbittersmann
0
120
TIL that the future :has already begun
gunnarbittersmann
0
93
TIL how to clear floats
gunnarbittersmann
0
85
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
97
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
86
The color rebeccapurple
gunnarbittersmann
0
140
Mehrsprachige Websites
gunnarbittersmann
0
92
Other Decks in Design
See All in Design
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
310
クライアントワークにおける UXリサーチの実践
kozotaira
0
600
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
160
Cards | Storyboards
giofortuna_story
0
160
ほしいテンプレート制作から始めるツール学習のススメ📝
60d
0
100
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
1
390
Starry | Storyboards | Scene 1-21
giofortuna_story
0
160
Goodpatch Tour💙 / We are hiring!
goodpatch
31
820k
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
530
The Golden Whitney
ohtristanart
PRO
0
140
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
590
「デザイン」を信じるには
iflection
0
180
Featured
See All Featured
Designing for Performance
lara
608
69k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
Building an army of robots
kneath
304
45k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
GraphQLとの向き合い方2022年版
quramy
46
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Review Best Practice
trishagee
67
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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