Web Font Performance
Full access to recording, code samples, and optimization checklist
- Duration 2.5 hours
- Seats left 18
- Level intermediate
Includes font subsetting tools and performance testing scripts. 90-day access to private discussion forum.
Program Overview
Technical Deep Dive
-
Font Loading Fundamentals
How browsers fetch and render fonts, understanding FOUT, FOIT, and FOFT
-
Subsetting and Formats
Creating optimized WOFF2 files, Unicode range subsetting, and variable font compression
-
Loading Strategies
Using font-display values, preloading techniques, and CSS Font Loading API
-
Self-Hosting versus CDNs
Performance tradeoffs, cache headers, HTTP/2 considerations
-
Measuring Impact
Web Vitals metrics, Chrome DevTools analysis, and real user monitoring
Includes performance budget calculator
Full Description
A typical web font file is 100-200KB. Add a few weights and styles, and you're pushing half a megabyte before your content even renders.
Most developers use font-display: swap and call it done. But that creates flash of unstyled text that makes your site feel broken. Others preload fonts, which delays everything else. Some subset fonts incorrectly and end up with missing glyphs in production.
There's a better approach. Modern browsers support font loading APIs that give you precise control. You can show critical text immediately with system fonts, load custom fonts in the background, and swap them in without layout shift. But the implementation details matter—mess up your font-face declarations and nothing works.
This webinar covers the full optimization pipeline. You'll learn how to subset fonts properly using Unicode ranges, when to self-host versus use Google Fonts, and how to set up preloading that actually helps. We'll also look at font-display strategies beyond the standard values and how to measure font loading impact with Web Vitals.
I'll show you real before-and-after metrics from production sites where proper font optimization improved Largest Contentful Paint by 1-2 seconds.