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
830
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
73
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
57
3 Fehler sind zu finden
gunnarbittersmann
0
70
TIL that the future :has already begun
gunnarbittersmann
0
61
TIL how to clear floats
gunnarbittersmann
0
59
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
65
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
66
The color rebeccapurple
gunnarbittersmann
0
81
Mehrsprachige Websites
gunnarbittersmann
0
75
Other Decks in Design
See All in Design
Wolf and the seven goatkids
_limex_
PRO
0
420
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
プロダクトデザインは子育て/Product design is parenting
medley
0
280
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
素晴らしき余白の世界
kasumidyaya
1
100
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
300
他人事じゃないWebアクセシビリティ入門
arihiro17
0
170
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.5k
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
570
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
600
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.8k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
A designer walks into a library…
pauljervisheath
199
23k
It's Worth the Effort
3n
180
27k
Docker and Python
trallard
33
2.7k
Building an army of robots
kneath
300
41k
Statistics for Hackers
jakevdp
789
220k
Music & Morning Musume
bryan
41
5.6k
In The Pink: A Labor of Love
frogandcode
138
21k
What's in a price? How to price your products and services
michaelherold
237
11k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
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