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
97
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
74
3 Fehler sind zu finden
gunnarbittersmann
0
120
TIL that the future :has already begun
gunnarbittersmann
0
85
TIL how to clear floats
gunnarbittersmann
0
79
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
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
2.7k
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
発表資料テンプレート / My slide template
thatblue
0
180
Tableau曲線表現講座(2024.11.21)
cielo1985
0
220
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
170
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.4k
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
520
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
110
LLMによるRAG評価用合成テストデータの生成
licux
6
600
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
640
セブンデックス カルチャーブック
sevendex
0
780
Featured
See All Featured
Being A Developer After 40
akosma
89
590k
A Tale of Four Properties
chriscoyier
157
23k
Optimizing for Happiness
mojombo
376
70k
BBQ
matthewcrist
85
9.4k
What's in a price? How to price your products and services
michaelherold
244
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Embracing the Ebb and Flow
colly
84
4.5k
The Cult of Friendly URLs
andyhume
78
6.2k
4 Signs Your Business is Dying
shpigford
182
22k
Into the Great Unknown - MozCon
thekraken
34
1.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
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