Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
FOIT, FOUT, FUCK
Gunnar Bittersmann
June 28, 2018
Design
0
640
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
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
4
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
8
The color rebeccapurple
gunnarbittersmann
0
6
Mehrsprachige Websites
gunnarbittersmann
0
11
TIL about -starting -blocks
gunnarbittersmann
0
5
TIL about hyfunation
gunnarbittersmann
0
9
TIL about font subsetting₂
gunnarbittersmann
0
4
TIL warum nicht GROẞ
gunnarbittersmann
0
3
TIL about cards
gunnarbittersmann
1
5
Other Decks in Design
See All in Design
i3DESIGN_Culture_Book / for Designer
i3design
0
7.4k
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
1.6k
家族アルバム みてねの企画からリリースまでとデザインの意図
naoyawatanabe
2
21k
モデルとダイアグラムの活用の本質
akiramotomura
0
390
[UX/UI design] Target users and developmental psychology
shira0000000
1
240
サイボウズのプロダクトデザイナーについて
cybozuinsideout
PRO
0
630
「文脈を理解する」ということについて 考えてみる
yutaromurakami
0
170
Ah, tu peux faire ça en CSS maintenant ? (version listing)
goetter
2
1.8k
Upper Hand
ruthbaraz
PRO
1
810
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
misaaa09
0
140
外食を支えるプロダクトを生み出す、顧客理解の追求
yamamoto67
1
480
自分の不安を受け入れるこころのデザイン
ryuuuuukun
0
670
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Designing Experiences People Love
moore
130
22k
GitHub's CSS Performance
jonrohan
1020
430k
Gamification - CAS2011
davidbonilla
75
4.1k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
It's Worth the Effort
3n
177
26k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Unsuck your backbone
ammeep
659
56k
Ruby is Unlike a Banana
tanoku
93
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
Build your cross-platform service in a week with App Engine
jlugia
221
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