Web Font Performance

Web font performance concerns the loading, rendering, and visual stability impact of custom typefaces on web pages. Custom fonts require additional HTTP requests and downloads (typically 20-100KB per weight/style), and can cause Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) during loading. With Core Web Vitals making performance a ranking factor, optimizing font loading has become critical. Techniques include subsetting, preloading, using modern formats (WOFF2), and leveraging font-display CSS properties.

stellae.design

Visual Design

Why It Matters

Custom web fonts are one of the most common causes of layout shift, invisible text flashes (FOIT), and delayed first contentful paint — all of which directly hurt Core Web Vitals scores and user experience. A single web font family with multiple weights can easily add 200-500KB to initial page load, and poor loading strategies make text invisible for seconds on slow connections. Optimizing font loading is one of the highest-impact, lowest-effort performance improvements available.

Real-World Examples

GitHub's System Font Stack

GitHub uses a carefully ordered system font stack that renders instantly on every operating system without any font download. The stack includes SF Pro, Segoe UI, Roboto, and other native fonts that provide a polished, consistent reading experience. This eliminates all font-related performance overhead while maintaining professional typography.

Google Fonts with Display Swap

Sites using Google Fonts with the display=swap parameter ensure text renders immediately in a fallback font, then transitions smoothly when the custom font loads. Combined with preconnect hints to fonts.googleapis.com, this approach provides a good balance between custom typography and performance. The user sees content immediately rather than staring at invisible text.

Counter-example

Loading Six Font Weights Without Optimization

A marketing site loads an entire font family with thin, light, regular, medium, bold, and black weights — each in both roman and italic — totaling over 800KB of font files with no subsetting, no preloading, and font-display set to block. Users on mobile connections see blank text for 3-5 seconds while fonts download, then experience a jarring layout shift when the text finally renders. The visual richness of six weights adds minimal value compared to the severe performance cost.

Role-Specific Guidance

Common Mistakes

• The most common error is loading every weight and style of a font family 'just in case' without auditing which weights the design actually uses — this can triple font payload unnecessarily. Teams also frequently rely on font-display: block (the default), which makes text invisible until fonts load, rather than using swap or optional for immediate text rendering. Another widespread issue is failing to self-host fonts and instead loading them from third-party CDNs, adding DNS resolution time and creating a privacy concern with no meaningful performance benefit on modern HTTP/2 connections.