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
950
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
95
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
72
3 Fehler sind zu finden
gunnarbittersmann
0
110
TIL that the future :has already begun
gunnarbittersmann
0
83
TIL how to clear floats
gunnarbittersmann
0
79
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
90
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
77
The color rebeccapurple
gunnarbittersmann
0
120
Mehrsprachige Websites
gunnarbittersmann
0
89
Other Decks in Design
See All in Design
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4k
太田博三(@usagisan2020)
otanet
0
210
TUNAG BOOK 2024
stmn
0
410
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
170
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
610
Arborea Art Book
thebogheart
1
310
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
440
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
300
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
770
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
300
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
4
740
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
500
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
Designing for humans not robots
tammielis
250
25k
Bash Introduction
62gerente
609
210k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
2
160
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
A Philosophy of Restraint
colly
203
16k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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