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
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
1
170
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
570
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
6
4.1k
プロダクトデザインは子育て/Product design is parenting
medley
0
280
UIをもたらすコンテクストの考察
securecat
9
2.5k
Wishing Star Comic
torije
2
1.1k
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
0
110
root Design Partnership Policy
root_recruit
0
3.9k
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
1
220
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.1k
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
480
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
304
41k
A Philosophy of Restraint
colly
195
16k
Large-scale JavaScript Application Architecture
addyosmani
502
110k
GraphQLの誤解/rethinking-graphql
sonatard
49
9.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Designing the Hi-DPI Web
ddemaree
275
33k
A Tale of Four Properties
chriscoyier
150
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
12
1.5k
Producing Creativity
orderedlist
PRO
336
39k
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