Web Fonts: How Many You Need, and Where to Host Them

Fonts are the third item on our page speed checklist, after hosting and images, and the one people are least willing to touch, because it feels like being asked to make the site uglier.

It is not that. Almost every font problem is a loading problem rather than a taste problem, and the fixes are invisible to the design.

What does a font actually cost?

A file per weight, per style, per family.

That is the part people miss. Choosing one family does not mean one download. If you use it at regular, semibold and bold, and italic for quotes, that is four files. Add a second family for headings at two weights and you are at six. Each one has to arrive before any text can be drawn in it.

A typical modern font file is somewhere between 15 and 40 KB in the WOFF2 format, which is the one to use and is meaningfully smaller than the older WOFF. Six of those is not catastrophic on its own. The problem is that they sit on the path between your visitor and your words, so they are expensive in a way their file size understates.

Hence the budget: one family, three or four weights. That is regular and bold, plus perhaps one more, and you will be surprised how rarely you miss the rest.

Variable fonts: one file, every weight

A variable font packs a continuous range of weights into a single file. Rather than downloading 400, 500, 600 and 700 separately, you download one thing and ask it for any weight in between.

The arithmetic is straightforward. A variable file is usually somewhat larger than one static weight and much smaller than three or four, so the moment you want more than two weights it is the better deal. It also means adding a weight later costs nothing, which quietly removes a decision you would otherwise keep revisiting.

Most well-known open fonts now ship a variable version. If yours does, use it.

The invisible text problem

Here is what happens by default in most browsers when a font is still loading: the text is there, laid out, taking up space, and completely invisible. Visitors watch a blank rectangle where your headline should be, for as long as the font takes to arrive.

font-display: swap changes that. The browser draws your text immediately in a fallback font, then swaps to the real one when it lands. Nobody stares at nothing.

The cost is that the swap is visible: text appears in one font and changes to another a moment later, and if the two have different proportions the line lengths change and the page shifts. You reduce that by choosing a fallback whose letters are close in width and height to your real font, so the swap is a change of style rather than a change of layout.

Between invisible text and a brief flash, the flash wins every time. People forgive a font changing. They leave a page that appears empty.

Self-host, for two separate reasons

The speed reason. A font on another company's server means the browser has to look up that domain, open a connection and negotiate security before it can even ask for the file. That handshake often costs more than the download. Serving the file from your own domain skips all of it, because the connection is already open.

The privacy reason. Requesting a file from a third party sends that third party your visitor's IP address and the page they were on. In January 2022 the Munich Regional Court awarded a visitor damages against a website that loaded Google Fonts from Google's servers, on the basis that transmitting an IP address that way needed a lawful basis it did not have. The fix the court pointed at was the obvious one: the same fonts, hosted locally.

Keep that in proportion. It was one first-instance decision by one German court, not an EU-wide statute, and this is not legal advice. But it made self-hosting the default recommendation across Europe, and since self-hosting is also the faster option, there is very little reason to argue with it.

The option nobody considers: no web font at all

A system font stack asks for whatever the visitor's device already has. On a Mac that is one typeface, on Windows another, on Android another. All of them are well-made, all of them are already installed, and all of them appear instantly.

Zero downloads. No invisible text. No flash. No layout shift. No third-party request. Every problem in this article disappears at once.

The trade-off is real: your site looks slightly different on different machines, and you give up a piece of brand identity. For a business whose look is the product, that is too much to give up. For a local service business whose visitors care whether the phone number is easy to find, it is a trade almost nobody would notice, and it is worth at least considering rather than dismissing.

How this looks in Bricks

Upload the font files to your site, register the family in the theme settings, and set it once in your theme styles so headings and body text inherit it rather than being set element by element. That is the same principle as design tokens, applied to typefaces.

Then check what is actually loading, because this is the step that catches people out. A theme, a plugin or an old template can each pull in a font you are no longer using, and nothing warns you. Open your site, look at the network activity in your browser's developer tools, and filter for font files. If more arrive than you chose, the extras are being requested by something you have installed.

That check pairs with sizing your images properly, since between them fonts and images are most of what a visitor downloads before your page is usable.

How many families, honestly?

One is a complete answer. A single family with a couple of weights, used consistently, reads as confident. Two is defensible when one is for headings and one for body text and they genuinely do different jobs.

Three is almost always the sign of a decision that never got made, and the fix is usually to delete rather than to choose better. If your headings and your body text are the same family at different weights and sizes, that is not a compromise. That is how most well-designed sites work, and our type scale guide covers how to build the hierarchy that makes one family enough.

Bottom line

One family, three or four weights, in WOFF2, served from your own domain, with font-display: swap so nothing is ever invisible. Use a variable font if you need several weights. Check your network tab afterwards to catch the fonts you did not ask for.

None of that changes how the site looks, which is the point: this is the rare optimization with no design cost attached. And if you are building something where the typeface is not the brand, a system font stack solves the whole category for free and appears instantly on every device your visitors own.