Performance Benefits of Variable Fonts
summary
Variable fonts replace multiple files with one interpolated file: Source Sans Pro example shows OTF single weight 243 KB vs variable 405 KB (variable is 65% smaller than five separate weights totalling ~1,170 KB). Compressed to woff2 sizes are ~111 KB (single) and 112 KB (variable). Subsetting with glyphhanger drops single to ~16 KB and variable to ~27 KB. Use font-variation-settings and font-display: swap to reduce layout shifts, but animating axes can trigger high CPU in Chrome and crash tabs.
AI-written summary · about
chapters (9)
- 0:00Introduction and setup
- 1:43What are variable fonts
- 7:52How to use variable fonts
- 10:27Performance benefits overview
- 12:13Reducing font file sizes
- 15:25Subsetting variable fonts
- 17:52Time to first render and FOUT
- 21:46Summary and future potential
- 27:07Performance caveats and conclusion
related talks
19mVariable Fonts and the Future of Web Design
33mVariable Fonts and the Future of Web Design
33mVariable Fonts: WTF?
32mAre variable fonts the future of web typography?
20mVariable fonts: a million times the possibilities...
33mConquer Variable Web Typography
32mModern Typographic Systems With Variable Fonts
34mVariable Fonts: The Future of Typography Has Already Begun