Browsers hide text set in a custom font until the file arrives, which on a slow connection can mean seconds of blank page. Use font-display: swap, load only the weights you use, and serve them from one place.

A page with no words on it

Open a small business website on a phone with one bar of signal and watch what arrives first.

The layout appears. The photographs fill in, the buttons take shape, the coloured bands settle into place. Where the headings and paragraphs should be, there is nothing.

A few seconds later the text appears all at once, sometimes in one typeface and then, a moment after, in another.

The words were ready the whole time. The browser was waiting for a font.

Why the browser hides the text

A custom font, or web font, is a file the browser downloads so your text appears in your chosen typeface rather than one already on the device.

When the words arrive before the font file, the browser has a choice: show them in a fallback font and swap later, or hide them and wait.

Most current browsers wait, keeping the text invisible for up to about three seconds before showing a fallback. On a fast office connection, nobody notices.

On a phone at a bus stop, three seconds of blank page is long enough for some visitors to press back, never knowing the page was ready.

What a typical site loads

The fifth is the one nobody notices. A theme requests a family from one place, a page builder or booking plugin requests the same family again from another, and the visitor's phone downloads both.

One line that shows the text

The fix is a setting called font-display. It goes in the site's stylesheet, the file that controls how pages look, beside each font's declaration.

Set to swap, it tells the browser to show the text straight away in a fallback font and switch when the custom font arrives. Visitors can start reading immediately.

Current versions of Chrome, Firefox and Safari support it. Browsers that do not recognise the line ignore it, so adding it breaks nothing.

Where fonts come from an outside font service, the setting depends on what that service allows. Whoever maintains the site can check.

Choosing the fallback

With swap in place, the fallback is what visitors on slow connections see first, so choose it with care.

A fallback close in width and height to the custom font keeps the page from jumping at the swap. A narrow custom font paired with a wide fallback reflows every paragraph.

The usual choices are standard fonts that devices already have, such as Georgia or Arial on a computer. Whoever styles the site can test a few and pick the closest.

A worked example

A wedding and event florist working from a small studio had a site built on three typefaces: a flowing script for headings, a light serif for text, and a sans-serif for the menu.

It looked lovely on the studio's computer. The owner first saw the problem at a rural venue, showing a couple the gallery on a phone over weak signal.

The photographs appeared. The captions, headings and prices did not, for long enough that the couple asked whether the site was broken.

The cause was nine font files from three sources: the script from one service, the serif in six weights from another, and the menu font and an icon font from the theme.

The fix kept the look. Font-display was set to swap, the serif came down to regular, italic and bold, and the icons became small image files.

The fonts, whose licences allowed it, moved onto the site's own server.

Fewer weights, fewer families

Every weight and style of a font is a separate file. Regular, italic, bold and bold italic of one family is four downloads before a second family is considered.

Most small business sites need one family for text in three or four styles, and perhaps one more for headings in a single weight.

Check what the pages use before cutting. If a heading still asks for a removed weight, the browser fakes it by thickening or slanting the regular one, which rarely looks good.

Decorative fonts deserve particular suspicion: a typeface used for one line on the home page is a whole file downloaded for that line.

One place, not three

Each outside source needs its own connection: the phone looks up the address, connects, and agrees on encryption before the first byte of font arrives.

On a slow phone connection, each new source adds a noticeable pause, and fonts often come from two or three.

Serving every font from one place, ideally the site's own server, removes those extra connections. Where a font service must be used, a preconnect hint asks the browser to open its connection early.

Modern browsers also read WOFF2, a compressed font format noticeably smaller than the older formats some themes still bundle.

Checking your own site

PageSpeed Insights, Google's free speed test, flags the problem directly, under a line reading ensure text remains visible during webfont load.

It also lists the font files involved, which is usually the first time an owner sees how many there are.

The simplest test needs no tools: open the site on a phone away from Wi-Fi, ideally with poor signal, and watch what appears in what order.

If the photographs arrive before the words, fonts are the likely reason.

The counter-case

A site that uses only the fonts already on the visitor's device has none of this problem, and some well-designed sites choose exactly that.

Swap is not free either. Visitors on slow connections see the page in one typeface, then watch it change. For a brand built on a distinctive typeface, that flash can matter.

For those, a setting called optional shows the fallback and uses the custom font only if it arrives almost immediately, usually from the browser's cache on a second page.

Either way, text that visitors can read at once beats the right typeface arriving too late to be read.

The fix, in order

  1. Run PageSpeed Insights on your home page.
  2. Count the font files it downloads.
  3. Remove weights the pages never use.
  4. Add font-display: swap to every font declaration.
  5. Choose a fallback close in size.
  6. Serve fonts from one place.
  7. Test on a phone with weak signal.

Step four is the one that matters most. It changes what every visitor on a slow connection sees, and it is one line for whoever maintains the site.

The rest of what makes a page heavy is covered in a home page that weighs eight megabytes.

Frequently asked questions

Why does text disappear while a page loads?

The browser is waiting for a custom font file. Most current browsers hide the text for up to about three seconds rather than show a fallback font.

What does font-display: swap do?

It tells the browser to show text immediately in a fallback font and switch to the custom font when it arrives, so visitors can start reading at once.

Do all browsers support font-display?

Current versions of Chrome, Firefox and Safari do. Browsers that do not recognise the setting ignore it, so adding it does not break anything.

How many font files should a site load?

As few as the design needs. Most small business sites need one text family in three or four styles and perhaps one heading font in a single weight.

Why load every font from one place?

Each source needs its own connection before anything downloads, and on a slow phone each one adds a pause. One source, ideally your own server, avoids that.

How can I tell if fonts are the problem?

Run PageSpeed Insights and look for the line about text remaining visible during webfont load, or watch the site load on a phone with weak signal.

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.

Photos loading before the words?

Run PageSpeed Insights on your home page today. If fonts are flagged, we will tell you which files can go.

Start a Conversation