@zachleat
YOU COMPLETED YOUR FIRST
FONT LOADING STRATEGY
CONGRATULATIONS
Font-display
1
Slide 45
@zachleat
Running for President
Mitt Romney Is Officially
Not
font-display: swap;
ITALIC LOADED FIRST
font-display: swap;
REGULAR LOADED FIRST
✅
✅
%
%
✅
LEGEND
WEB FONT
FALLBACK
%
Slide 46
@zachleat
I ADDED FONT-DISPLAY
BUT MY WEB FONTS
&
STILL SEEM SLOW
Slide 47
@zachleat
DOWNLOAD CHECKLIST
CSS PARSED, @Font-FACE FOUND
A NODE IN THE DOCUMENT:
✔
✔
glyphhanger
https://zachleat.com/
--subset=*.ttf
using pyftsubset:
https://github.com/fonttools/fonttools
Slide 66
Slide 67
Slide 68
@zachleat
8 VARIATIONS
BEFORE
TTF
AFTER
TTF
AFTER
WOFF2
1.14 MB
196 KB
93 KB
Slide 69
glyphhanger --whitelist="ABCD" --subset=.ttf
glyphhanger --whitelist="U+41-44" --subset=.ttf
using pyftsubset:
https://github.com/fonttools/fonttools
Slide 70
@zachleat
SMALLER FONT FILES LOAD FASTER
REDUCE FOIT
REDUCE FOUT
Slide 71
@zachleat
VARIABLE
FONTS
Slide 72
@zachleat
San Francisco Black
San Francisco Heavy
San Francisco Bold
San Francisco Semibold
San Francisco Medium
San Francisco Regular
San Francisco Light
San Francisco Ultralight
SF-Pro-Display-Black.OTF
SF-Pro-Display-Heavy.OTF
SF-Pro-Display-Bold.OTF
SF-Pro-Display-Semibold.OTF
SF-Pro-Display-Medium.OTF
SF-Pro-Display-Regular.OTF
SF-Pro-Display-LIGHT.OTF
SF-Pro-Display-ULTRALIGHT.OTF
Slide 73
@zachleat
SF-Pro-Display-Black.OTF
SF-Pro-Display-Heavy.OTF
SF-Pro-Display-Bold.OTF
SF-Pro-Display-Semibold.OTF
SF-Pro-Display-Medium.OTF
SF-Pro-Display-Regular.OTF
SF-Pro-Display-LIGHT.OTF
SF-Pro-Display-ULTRALIGHT.OTF
One Variable
Font File
Slide 74
@zachleat
Slide 75
@zachleat
VARIABLE
FONTS
Slide 76
@zachleat
YOU PAY WITH KB
Slide 77
@zachleat
SOURCE SANS PRO
SOURCE SANS PRO
VARIABLE
115
KB
39
KB