Web Fonts and Speed
Why Web Fonts Add Cost to a Page
When it comes to web fonts page speed, two factors matter: the size of the font files and how long visible text must wait for them. Web fonts are font files the browser downloads along with a page, so a typeface looks the same on every device. A single font file can run to tens or hundreds of kilobytes, and a page often uses several weights and styles.
Timing matters as much as size. The browser needs the font before it can draw text in that typeface. Font files do not block the page in the same way a stylesheet does, but the text that uses them waits for the font or is drawn with a fallback first. Browsers handle that wait in different ways.
Invisible Text, Font Swaps and font-display
When a font is still loading, a browser has two broad choices. It can hide the text until the font arrives, which is called a flash of invisible text (FOIT). Or it can show the text in a fallback font and swap in the web font when it is ready, which is called a flash of unstyled text (FOUT).
The font-display CSS property controls this behavior. A value of swap shows fallback text right away, while optional lets the browser skip the web font on slow connections. Each choice trades a short blank period against a visible change of typeface.
Reducing Font Weight and Choosing Where Fonts Come From
Subsetting removes glyphs the page never uses, such as characters from scripts a site does not publish in. A Latin-only subset of a font can be a fraction of the size of the full file. Compressed formats such as WOFF2 keep files small without visible loss.
Variable fonts can replace several separate weight files with one file that covers a range of weights. Limiting the number of styles a page loads is often the simplest saving, and the same logic applies to page weight in general.
Fonts can be self-hosted, served from the same server as the site, or loaded from a third-party font service. Self-hosting avoids a separate connection to another domain, which adds time. The old idea that a shared third-party cache would already hold a font has become less reliable, because modern browsers keep caches separate for each site.
Frequently asked questions
How Do Web Fonts Cause Layout Shift?
When the fallback font has different width or height metrics from the web font, the text reflows as the swap happens. Lines may wrap differently and push content down, which counts toward Cumulative Layout Shift. Choosing a fallback with similar metrics, or using a font-display setting that limits the swap, reduces the effect.
Are Third-Party Font Services Always Slower?
Not always. A third-party font service adds a connection to another domain, which can delay the font. The impact depends on how quickly that domain responds, whether the font is cached, and whether the file is requested early with a hint such as preload. Self-hosting gives full control over these factors.