Web Font Performance: Loading Fonts Without Slowing Down

Web fonts typically add 100-300KB per weight. A site using two fonts in four weights loads over 1MB of font data. The key optimization is subsetting: include only the characters you need. Google Fonts does this automatically when you specify text content. Use font-display: swap to show fallback text immediately, then swap in the web font when loaded. Preload critical fonts with link rel="preload" to start fetching early. Limit to two font families with a maximum of four weights total. Variable fonts can replace multiple weight files with a single file, often reducing total size by 40 percent. Self-hosting fonts avoids the DNS lookup to Google servers, which can save 100-200ms. Measure your font loading with Lighthouse and WebPageTest to identify bottlenecks.