Each font family, weight, and style you use is a separate file the browser has to fetch before it can draw text in it. Four families at three weights each is twelve downloads standing between the visitor and readable content, and the visible result is either text that does not appear or text that appears and then jumps as the real font arrives.

What a font actually costs

Fonts are not selected once. Every distinct combination is its own file.

A single family used at regular, medium, and bold is three downloads. Add italics and it is six. Use a second family for headings with the same treatment and you are at twelve files before a single word can render in the intended typeface. Each is typically somewhere between twenty and a hundred kilobytes, so the total sits comfortably in the hundreds.

That would be tolerable if fonts loaded alongside everything else. The problem is where they sit in the sequence: text cannot be painted in a font that has not arrived, so font loading is directly in the path between the visitor and the thing they came for.

The two visible failures

Invisible text

The browser has the content and the layout but withholds the text entirely until the font arrives. The visitor sees images, colour, and blank space where the words should be. On a slow connection this can run for several seconds, during which the page looks broken rather than loading.

Shifting text

The browser draws the text in a fallback immediately, then swaps when the real font arrives. Because the two fonts have different letter widths, everything reflows: paragraphs change length, headings wrap differently, and buttons move. On a phone this is why people tap the wrong thing.

Both are controlled by a single property that tells the browser how to behave while waiting. Showing a fallback immediately and swapping is almost always the better trade, because a visitor can read a page set in a substitute font and cannot read a blank one. The remaining shift is then managed by choosing a fallback with similar proportions to the real font, which reduces how far things move when the swap happens.

Characters you will never use

A complete font file contains glyphs for many languages, currency symbols, mathematical operators, and punctuation no business site will ever display. All of it downloads.

Subsetting cuts the file down to the characters actually needed, which for an English-language business site is a small fraction of the whole. It routinely halves the file size or better, changes nothing visible, and is the single highest-return font optimisation available. Most font services offer it, and most sites do not use it.

Variable fonts

A variable font holds an entire range of weights in one file rather than one file per weight. Where a site uses three or four weights of the same family, a single variable file is frequently smaller than the separate files it replaces, and it makes intermediate weights available at no extra cost.

The trade is that one variable file is larger than any one static weight. Using a single weight of a single family, static is smaller. Using three or more, variable usually wins. It is worth checking rather than assuming, since the answer depends on the family.

System fonts, honestly assessed

Every device ships with good typefaces, and using them costs nothing at all: no download, no waiting, no shift. Text is drawn immediately.

The trade is real. A distinctive typeface carries brand character that a system stack does not, and for businesses selling on craft or design that character does work. The sensible middle ground, which is what most well-built sites use, is a distinctive family for headings where there is little text and the impact is high, with a system stack for body copy where the volume is large and the visual difference is small. That halves the font weight while keeping nearly all the character.

The audit

This is a build-time concern rather than something to revisit monthly, which is what makes it easy to neglect. It gets decided once when the site is made, and then every visitor pays for that decision on every first visit for as long as the site exists.

Frequently asked questions

How many web fonts should a website use?

Two families is a sensible ceiling, and one is often enough. The count that matters more is the total number of weights and styles, since each is a separate file the browser has to download.

Why does text on my site disappear then appear?

The browser is withholding text until the custom font arrives. Changing the font loading behaviour so a fallback is shown immediately and swapped later means visitors can read the page while the font is still loading.

Why does my page jump around while loading?

Usually the swap from a fallback font to the real one, since different fonts have different letter widths. Choosing a fallback with similar proportions substantially reduces how far the layout moves.

Are variable fonts better for performance?

Where you use three or more weights of one family, usually yes, because a single file replaces several. Using only one weight, a static file is smaller. It is worth comparing rather than assuming.

What is font subsetting?

Cutting a font file down to only the characters the site actually displays. A complete file includes glyphs for many languages and symbols that an English-language business site never uses, and subsetting often halves the size with no visible change.

Are system fonts a reasonable choice?

Yes, and they cost nothing to load. A common approach is a distinctive family for headings, where the impact is high and the text volume is low, with a system stack for body copy.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Not sure how much your fonts are costing you?

We subset, combine, and load fonts properly at build time, so your type looks the way it should without holding up the page.

Start a Conversation