Definition
Custom web fonts are often render-blocking resources that delay text display. Without optimization, the browser may show a flash of invisible text (FOIT) or a flash of unstyled text (FOUT) during font loading. For SEO, font optimization impacts LCP and CLS. Techniques include: font-display: swap (display text immediately with a system font, then switch), preloading critical fonts, using WOFF2 format (30% lighter than WOFF), subsetting (loading only used characters), local font hosting (avoiding external Google Fonts for GDPR and performance), and limiting the number of variants (weights, styles).
Key Points
- Use font-display: swap for immediate text display
- Preload critical fonts with <link rel='preload' as='font'>
- WOFF2 is the optimal format (30% lighter than WOFF)
Practical Examples
Font-display swap
A site adds font-display: swap to its @font-face rules. Text displays immediately with a system font, then switches to the custom font once loaded. FCP improves by 400ms.
Google Fonts subsetting
A site using Roboto adds subset parameters to load only necessary characters. Font weight drops from 150KB to 20KB.
Frequently Asked Questions
Local hosting is recommended for performance (no third-party connection) and GDPR compliance (no requests to Google servers). Download fonts from google-webfonts-helper and serve them from your domain.
Limit yourself to 2-3 font families maximum and 2-4 variants per family (regular, bold, and possibly italic). Each variant adds a network request and weight. Beyond that, the performance impact becomes significant.
Go Further with LemmiLink
Discover how LemmiLink can help you put these SEO concepts into practice.
Last updated: 2026-02-07