Fonts Loading From Three Different Places

Three sources on one page

A typical small business site can be requesting fonts from several places without anybody having decided to.

The theme loads a typeface from a font service. A page builder plugin loads its own. An icon set arrives from a third place. A form plugin brings a fourth for its buttons.

Each was reasonable in isolation, added by a different component at a different time.

Together they mean the page contacts several different servers before it can finish rendering text, which costs more than the files themselves.

Why a source costs more than a file

The mechanical point that makes consolidation worthwhile.

Requesting a file from a new origin is not just a download. The browser has to look up the address, open a connection, and negotiate security before anything is transferred.

That setup takes a round trip or several, and on a phone connection each round trip is meaningfully slow.

Which means two font files from one source are considerably cheaper than one file from each of two sources.

And it means the count of origins matters more than the total size, which is the opposite of how people usually think about page weight.

Where the sources come from

• The theme, loading its chosen typeface.
• A page builder with its own font settings.
• An icon font from a separate provider.
• A form or slider plugin bringing its own.
• A stylesheet that imports another stylesheet.
• An embedded widget loading fonts of its own.

The fifth is the sneaky one: a stylesheet importing another stylesheet delays everything, because the browser cannot discover the second request until it has downloaded and read the first.

Finding all of them

The check, and it takes a couple of minutes.

Open a page, open the developer tools network panel, and reload.

Filter by font, then sort by domain. That shows every font file requested and where each came from.

Count the distinct domains rather than the files, since that is the number you are trying to reduce.

Do it on a service page as well as the homepage, since page builders and plugins frequently behave differently on different templates.

A site pulling fonts from three or four domains is common and worth an hour.

A worked example

A business had a site that felt slow on phones despite compressed images and a light page.

The network panel showed font files arriving from four separate domains: the theme's chosen typeface, an icon set, a set loaded by a slider plugin that was no longer used on any page, and one imported by a stylesheet belonging to a form plugin.

Eleven font files in total, across four origins, for a site that visibly used two typefaces.

They removed the unused slider plugin entirely, replaced the icon font with a handful of inline graphics, and self-hosted the main typeface with only the two weights actually in use.

Font requests went from four domains to one, and eleven files to three.

The mobile measurement for when the main content appeared improved noticeably, and the desktop figure barely moved, which is the usual pattern for a connection-count problem.

Self-hosting is usually the answer

Because it eliminates an origin rather than reducing a file.

Serving the font from your own domain means no additional lookup, no additional connection, and no dependency on somebody else's availability.

It also gives you control over which weights are included, and most sites are loading several they never display.

The practical steps are downloading the font in a modern format, placing it with your site's files, and referencing it in your stylesheet, which most themes and plugins support directly.

Check the licence for anything you did not buy, since not every typeface permits self-hosting, and most open ones do.

There is also a privacy dimension, since a font requested from a third party involves a request to that party from every visitor.

The plugin that brings its own

The category worth auditing specifically, because it is the least visible.

Plugins frequently load their own stylesheets and fonts on every page, whether or not their feature appears on that page.

A form plugin loading fonts on your homepage, where there is no form, is doing pure waste.

Many have a setting to disable their own font loading, or to load assets only where needed, and it is worth looking through the settings of anything that appeared in your network panel.

Where a plugin has no such setting and is loading a font you do not use, that is a reasonable argument for finding a different plugin.

Let the text show while it loads

A small setting that changes the visible experience regardless of how many sources remain.

By default some browsers hide text until its font arrives, which produces a page that appears blank and then fills in.

A display setting instructs the browser to show the text immediately in a fallback and swap when the font is ready.

That does not make the page faster and it makes it usable sooner, which is what the measurement about layout stability and the visitor's impression both respond to.

It is one line in a stylesheet, or a checkbox in many themes.

The counter-case

This is a modest optimisation and should be kept in proportion.

On a site whose real problem is uncompressed photographs, consolidating fonts is a rounding error, and the images should be dealt with first.

There is also a risk in removing an icon font carelessly, since icons frequently appear in navigation and buttons across the whole site and a partial replacement leaves squares and gaps.

And a font service does have advantages: caching, format selection, and no maintenance, which for a small site with one typeface may be perfectly reasonable.

Count your origins. If it is one or two, this subject is closed. If it is four, spend an hour.

The check

1. Open the network panel and filter by font.
2. Count distinct domains, not files.
3. Check a service page as well as the homepage.
4. Find which plugin each source belongs to.
5. Disable font loading in plugins that allow it.
6. Self-host the one you keep, with the weights you use.
7. Set text to display while the font loads.

Step two is the number that matters, since origins cost more than files and reducing four to one is worth more than removing several kilobytes.

Which weights to keep is covered in fonts you are loading and not using.

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.