Fonts and performance: how many, which formats, and self-hosting
How web fonts affect page speed, the rules we apply to font count, weights, formats and loading, and why we serve them from your own domain.
The short answer
Web fonts make a site look like itself, and they are also files the browser must download before text renders in them. A site that loads five families in every weight from a third-party service is downloading hundreds of kilobytes before its headline appears; a site with two families in three weights, in a modern compressed format, subset to the characters it uses, served from its own domain and preloaded, shows text almost immediately and never shifts the layout when the font arrives. Self-hosting matters twice over: it removes a connection to a third party that would receive every visitor’s address, and it is faster, because modern browsers no longer share cached fonts across sites, so the old argument that a shared font service is quicker is gone. The rules fit on one line: two families, few weights, modern format, subset, self-hosted, preloaded, with a fallback that matches.
What each decision costs or saves
| Decision | Cost of getting it wrong | What we do |
|---|---|---|
| Number of families | Each family is several files; five families can be half a megabyte | Two at most, often one |
| Number of weights | Each weight is a file; loading nine when three are used | Only the weights used; variable fonts where many are needed |
| Format | Older formats are much larger | The modern compressed format only |
| Character set | Full sets include scripts the site never shows | Subset to the languages and characters used |
| Where served from | A third-party connection, a privacy transfer, no cache sharing benefit | Self-hosted from your domain with long cache lifetimes |
| Loading order | Fonts discovered late render text late | Preload the one or two files used above the fold |
| Swap behaviour | Invisible text, or a jarring swap that shifts layout | Show fallback immediately with a size-adjusted fallback face |
| Icon fonts | A whole font for a few icons | Inline vector icons instead |
Setting fonts up
- Choose at most two families and list the weights the design actually uses.
- Obtain the files in the modern compressed format, licensed for self-hosting, subset to your character set.
- Serve them from your own domain with cache headers that last a year.
- Preload the files used above the fold on every page.
- Declare each face with swap behaviour and a size-adjusted fallback.
- Replace any icon font with inline vector icons.
- Measure first text render and layout shift on a phone, before and after.
Fonts and the rest of performance
Fonts sit alongside images and JavaScript as the things that decide how fast a page feels. Images are usually the largest by weight, JavaScript the largest by processing time, and fonts the ones that delay the moment text can be read. Handling all three is what makes a site fast; fonts are the quickest of the three to fix and the most often neglected.
What this means for you
Use two font families at most, only the weights you need, in the modern format, subset, self-hosted from your domain, preloaded above the fold, with a matched fallback so nothing shifts. It makes text appear sooner, removes a third-party data transfer, and takes an hour to set up on a site that was doing it the accumulated way.
Frequently asked questions
How many fonts should a business website use?
Two families at most, typically one for headings and one for body text, or one family used for both. Within them, the weights actually used, which is usually regular, bold and perhaps one more. Each additional family or weight is another file, and a site uses a fraction of what it loads. Designers can do a great deal with two well-chosen families.
What is the flash of unstyled or invisible text?
While a web font downloads, the browser either shows text in a fallback font and swaps it, causing a visible change, or shows nothing, causing a blank. The right settings show the fallback immediately, with a fallback chosen and adjusted to match the web font's dimensions, so the swap is barely noticeable and the layout does not shift. Preloading the main files makes the swap happen sooner.
Do system fonts make sense instead?
For some businesses, yes. The fonts already on visitors' devices load instantly, look native and cost nothing. The trade-off is less distinctive typography and slight differences between devices. A brand that leans on its typeface should self-host it properly; one that does not can use system fonts and remove the question entirely.
Sources
- web.dev: Best practices for fonts (accessed 2026-09-12)