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
WHAT ARE ME?
takuro_nakajima
PRO
0
1.2k
The Fight
euralisw
0
110
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
320
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
580
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
Ride or Die Animatics
warwatkar
0
140
Portfolio 2023.07.28
helemarudesu
0
570
他人事じゃないWebアクセシビリティ入門
arihiro17
0
170
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Web Components: a chance to create the future
zenorocha
305
41k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Designing with Data
zakiwarfel
95
4.8k
The Language of Interfaces
destraynor
151
23k
In The Pink: A Labor of Love
frogandcode
138
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
The Invisible Customer
myddelton
114
12k
Building Adaptive Systems
keathley
30
1.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Practical Orchestrator
shlominoach
181
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
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