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
940
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
92
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
70
3 Fehler sind zu finden
gunnarbittersmann
0
110
TIL that the future :has already begun
gunnarbittersmann
0
82
TIL how to clear floats
gunnarbittersmann
0
77
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
88
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
76
The color rebeccapurple
gunnarbittersmann
0
110
Mehrsprachige Websites
gunnarbittersmann
0
88
Other Decks in Design
See All in Design
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
420
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
410
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
720
最速[要出典]アクセシビリティチェック
magi1125
2
130
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
260
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
680
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
330
Yahoo Newsletter Clicker Template
xuechunwu
0
300
The One
chinweanimation
0
100
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
520
実利の世界で、表現者である
kiyou77
3
200
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The Cult of Friendly URLs
andyhume
78
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Documentation Writing (for coders)
carmenintech
67
4.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
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