Type Performance and Loading
A focused workshop where typography theory meets practical application — studying typeface selection, spacing systems, and readability at scale.
Web fonts are one of the most common sources of layout shift and render-blocking on production sites. The fixes are well documented but rarely applied consistently.
How font loading works
The course starts with the browser font loading pipeline: how fonts are discovered, when they are fetched, and what triggers FOUT versus FOIT. Most performance problems start here.
font-display and its trade-offs
Each font-display value is covered with real examples of what it produces visually. Swap, fallback, and optional behave differently across browsers and connection speeds, and the right choice depends on the typeface and context.
What about self-hosting versus Google Fonts?
Both are covered. Self-hosting gives more control over caching and subsetting. Google Fonts has improved its loading infrastructure significantly. The course covers both approaches without a fixed recommendation.
Subsetting and size reduction
Font subsetting using tools like glyphhanger and pyftsubset is covered in detail. A full Latin subset is often four to six times larger than what a specific project needs. You will measure before and after on a real font file.
By the end you will have a repeatable audit process for font performance on any project.
Workshop structure
Each step in this workshop builds directly on the previous. Participants work through real web typography scenarios rather than reading about them.
Course Modules
- The browser font loading pipeline step by step
- FOUT, FOIT, and FOFT: what causes each and when it matters
- font-display values: swap, fallback, optional, block
- Preloading fonts: when it helps and when it backfires
- Self-hosting setup: formats, caching headers, preconnect
- Subsetting with glyphhanger and pyftsubset
- Unicode-range descriptors for selective loading
- Measuring font performance with Lighthouse and DevTools