Chykalophia Docs

How web fonts affect your site's load time, why they can cause text to flash or jump, and how to minimize their impact on performance.

Web fonts make your site look polished and on-brand. They also add extra files for browsers to download — and if they load slowly, they can cause text to flash, disappear, or shift as the page loads. This guide explains the problem and what good font loading looks like.

Quick summary

Fonts add download time and can cause layout shifts (text flashing or jumping). The main fixes are: use fewer font families, limit the number of weights loaded, and ensure fonts are loaded efficiently. Your development team handles the technical setup — but you can help by keeping your font choices lean.

How fonts affect load time

When a browser loads your page, it sees that you are using a custom font (like a Google Font or a licensed typeface). It has to:

Identify which font files are needed
Download those files from a server
Apply the font to all the text on the page

Font file sizes vary a lot, mostly with how many characters (glyphs) the file carries. A typeface that covers dozens of languages is a much bigger download than one trimmed to the characters your site actually uses.

Until the font file arrives, the browser has to decide what to do with the text. This leads to two common problems.

Flash of Unstyled Text (FOUT) and Flash of Invisible Text (FOIT)

FOUT happens when the browser shows text in a fallback font first, then swaps it to the web font when it arrives. You see the text jump from one typeface to another.

FOIT happens when the browser hides all text while the font loads. You see a blank page where words should be — then text appears suddenly.

Both are jarring for visitors. And whichever one you get, the moment the web font takes over the layout can shift, because the web font and the fallback rarely take up the same amount of space on the page. That counts against your Cumulative Layout Shift (CLS) score.

A CSS setting called font-display decides which behaviour you get. swap shows the fallback straight away and swaps the web font in whenever it arrives: nothing is ever invisible, but a late font means a visible jump. optional gives the web font a short window and then sticks with the fallback for that page load, so there is no jump at all — at the cost of sometimes not showing your font. Cutting the shift itself is a separate job, done by matching the fallback's spacing to the web font's with CSS size-adjust.

What makes fonts slower

Using many font families

Every different typeface (for example, a heading font and a body font) is a separate set of files to download. Two font families mean roughly twice as many files to fetch as one.

Loading many font weights

Each weight variation — Regular, Medium, Bold, Italic, Bold Italic — is usually its own file, so a site that loads eight weight variations is downloading eight font files. The exception is a variable font, where one file covers a range of weights instead.

A common trap: a design uses Google Fonts with all weights selected ("just in case"), when only two or three are ever actually used on the site.

Hosting fonts on external servers

Google Fonts is a common source for web fonts. By default, fonts are loaded from Google's servers, which means setting up a connection to another server before the font can be downloaded.

Self-hosting the fonts removes that extra connection — but it is not automatically faster, and web.dev is careful to say so. Self-hosting only helps if your own server is quick and sits behind a CDN, and you have to reproduce the optimisations Google Fonts applies for you, such as subsetting and WOFF2 compression. Done carelessly, self-hosting can leave you no better off than you started.

Very large character sets

Some fonts include characters for dozens of languages, which adds significantly to the file size. A font trimmed to the characters a page actually needs (subsetting) is much smaller. Google Fonts already does this for you by splitting its fonts into subsets — which is one of the optimisations that goes missing when people move to self-hosting.

What good font loading looks like

When your site is well-configured for fonts, here is what happens:

Only the weights and styles you actually use are loaded, in WOFF2 format
The most important fonts are preloaded so the browser finds them early — used sparingly, because preloading everything just takes resources away from the rest of the page
A well-matched fallback font is defined, minimizing visual jump when the web font arrives
Font files are served from a fast location (your server behind a CDN, or the font provider's own network)

This is a developer task — you do not need to configure it yourself. But you can help by keeping font choices lean.

A practical tip

When reviewing a design, resist the urge to add a second typeface "for variety." Two well-chosen font weights of one typeface almost always looks better and loads faster than two different typefaces.

Google Fonts and privacy

Privacy questions have been raised in the EU about loading fonts directly from Google's servers, because doing so means every visitor's browser has to connect to Google to fetch them. Self-hosting the fonts removes that connection. This is general information rather than legal advice — if it matters for your site, ask us and we will look at self-hosting with you.

Common questions

Can I keep my custom brand fonts without hurting performance?

Yes. Custom brand fonts can be loaded efficiently with the right setup. The key is subsetting them (only loading the characters you actually use), serving them in WOFF2 from a fast location, and preloading the ones that matter most. Check the font's licence allows subsetting and self-hosting before you start. The performance cost of a well-configured custom font is small.

Will using system fonts make my site faster?

Yes — system fonts (like the default fonts on Windows or Mac) load instantly because they are already on the visitor's device. Some modern sites choose a "system font stack" for body text to eliminate font load time entirely. The tradeoff is that your site may look slightly different on different operating systems.

I see 'font-display' mentioned in my PageSpeed report. What does it mean?

font-display is a CSS setting that controls what the browser does while waiting for a font to load. There is no single right value: it depends on how much the typeface matters to your brand, and how jarring a late swap would be. swap shows text in a fallback font immediately and swaps to the web font when it is ready, so text is never invisible — it is the value that delays text the least, and the usual choice when getting words on screen is the priority. optional is the more performance-minded option: it avoids the swap entirely, at the cost of skipping your web font when it arrives late.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.

Fonts & page speed