Web Fonts and What They Cost

What a web font actually costs

A file that must be downloaded before text can render in it, which puts it on the path between a visitor arriving and reading anything.

Three specific costs follow.

Delay. The browser waits for the font, and depending on the settings either shows nothing or shows a fallback.

Shift. When the font arrives, text re-renders at slightly different dimensions, moving the layout under somebody who has started reading.

Weight. Each family and each variant is a separate file, and sites routinely load six or eight while using three.

The invisible text problem

The failure worth understanding, because it is the default in some setups.

A browser waiting for a font may render nothing at all for a period, producing a page that appears blank while the text is already there.

The alternative is showing a fallback font immediately and swapping when the custom one loads. That means text is readable straight away and shifts slightly when the swap happens.

For a business site the second is nearly always correct. A visitor reading a slightly wrong typeface is better served than one looking at nothing, and the setting that controls this is a single line.

Reducing the shift is a matter of choosing a fallback with similar proportions, which makes the swap much less noticeable.

Loading fewer files

The largest available saving and it is mostly deletion.

Count what you actually use. Most small business sites need a regular weight and a bold, in one or two families. Sites frequently load light, regular, medium, semibold, bold, and black, plus italics for each, and use three of them.

Each unused variant is a file being fetched for nothing.

Also worth checking: whether a theme or a page builder is loading a font family you replaced but never removed, which is common and invisible until you look at the network requests.

Hosting them yourself

Worth doing for two reasons, one performance and one legal.

Serving fonts from your own domain removes a connection to another server, which on a slow connection is a measurable delay before the fetch even begins.

The other consideration is privacy. Loading a font from a third party sends the visitor's request, including their address information, to that provider. Whether that matters legally depends on jurisdiction and has been the subject of decisions elsewhere, and self-hosting removes the question entirely.

Self-hosting also means checking the licence permits it, which most open fonts do and some commercial licences restrict.

Subsetting

A technique that reduces file size substantially and is rarely applied.

Font files frequently contain characters for many languages and scripts your site will never use. Restricting the file to the characters you need can cut its size considerably.

For most Canadian small business sites that means Latin characters with accents, which is a fraction of a full font file.

Many font services offer this as an option and most tooling supports it, which makes it a settings change rather than a project.

The alternative worth considering

Using no custom font at all for body text.

System fonts, meaning whatever the visitor's device already has, load instantly because there is nothing to fetch. They also look native on each platform.

The compromise most sites should consider: a custom font for headings, where the character matters and the text is short, and system fonts for body text, where readability matters more than distinctiveness.

That removes most of the cost while keeping the visual identity where it is actually noticed.

The licensing point

Worth stating because it is regularly overlooked.

Fonts are licensed rather than owned, and web use is frequently a separate licence from desktop use. A font installed on a designer's computer is not automatically licensed for a website.

Commercial web font licences are sometimes limited by page views, and exceeding that limit is a licence breach. For a small business this is rarely an issue and it is worth knowing which fonts you are entitled to use.

Where the licence position is unclear, an open-licensed font avoids the question and there are many good ones.

The check

1. List the font files your site loads, visible in the browser network view.
2. Compare that to what you actually use.
3. Remove the rest.
4. Set the display behaviour so text shows immediately.
5. Consider self-hosting what remains.
6. Check the licence covers web use.

Steps one to three take twenty minutes and typically remove several requests from every page load, which shows up directly in the waterfall described in measuring speed in a way that means something.

Frequently asked questions

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.