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
82
3 Fehler sind zu finden
gunnarbittersmann
0
130
TIL that the future :has already begun
gunnarbittersmann
0
97
TIL how to clear floats
gunnarbittersmann
0
91
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
100
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
93
The color rebeccapurple
gunnarbittersmann
0
150
Mehrsprachige Websites
gunnarbittersmann
0
95
Other Decks in Design
See All in Design
OLTA株式会社/デザイン紹介資料
taxy
0
310
「デザイン」を信じるには
iflection
0
240
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
240
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
660
AIで加速するアクセシビリティのこれから
magi1125
3
480
Cards | Storyboards
giofortuna_story
0
260
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
350
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
120
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
570
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
450
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
290
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Adopting Sorbet at Scale
ufuk
77
9.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Navigating Team Friction
lara
186
15k
Done Done
chrislema
184
16k
Scaling GitHub
holman
459
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Fireside Chat
paigeccino
37
3.5k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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