Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
91
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
68
3 Fehler sind zu finden
gunnarbittersmann
0
110
TIL that the future :has already begun
gunnarbittersmann
0
80
TIL how to clear floats
gunnarbittersmann
0
75
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
86
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
74
The color rebeccapurple
gunnarbittersmann
0
110
Mehrsprachige Websites
gunnarbittersmann
0
85
Other Decks in Design
See All in Design
Improve a service workshop
mastervicedesign
1
110
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
230
Credence
lratmansunu
0
480
アフォーダンスとシグニファイア
ryokanakai
1
330
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
400
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
190
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
430
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
160
Design System for training program
mct
0
150
Night Shift (beginning sequence)
cpineda57
0
910
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
730
ZKK_001.pdf
nicholaspegu
0
1.4k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
Thoughts on Productivity
jonyablonski
67
4.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building an army of robots
kneath
302
43k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Agile that works and the tools we love
rasmusluckow
327
21k
Scaling GitHub
holman
458
140k
We Have a Design System, Now What?
morganepeng
50
7.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
How to train your dragon (web standard)
notwaldorf
88
5.7k
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