The Five Whys of Web Font Loading Performance
summary
Default WordPress theme loads five font files totaling 100 kilobyte of web fonts and on 3G shows 3.3 seconds first render and visually complete at 5.7s with all text readable ~4.9s. Tests run with WebPageTest on 3G, files served from Netlify, demos on GitHub. Self-hosting plus preconnect and selective preload moves some fonts before render; adding font-display: swap eliminates invisible text; the CSS Font Loading API batches remaining loads into one reflow. Variable fonts can shrink file count but sometimes increase single-file size (example ~115 KB).
AI-written summary · about
chapters (25)
- 0:00Intro
- 0:32Title
- 3:09Methodology
- 4:41Invisible Text
- 5:34Mitt Romney
- 6:33Text in Motion
- 8:21Visible Text
- 8:45Web Font Reflow Count
- 10:18Web Safe Fonts
- 11:30System Fonts
- 13:45Overview
- 14:32Preconnect
- 16:07SelfHosting
- 19:06Sharding
- 19:50Antipattern
- 20:25Font Display
- 23:05Preload
- 27:17User Disruption
- 28:10Metrics Prioritization
- 31:27Mini Review
- 32:14CSS File Loading API
- 36:01Variable Fonts
- 37:48Variable Font Size
- 39:12VFont Stock
- 41:53Discussing Font Synthesis
related talks
47mThe Scoville Scale of Web Font Loading Opinions
32mHigh Performance Web Fonts
26mHigh Performance Web Fonts
31mFontastic web performance
28mHosting Fonts? Good Luck!
37mThe Critical Request: An investigation into what blocks render
19mOptimising Core Web Vitals with web fonts
31mFaster fonts for speed fanatics