Visible loading text

Silktide checks whether your text stays readable while custom fonts are downloading. Some font setups make browsers hide text completely until the font file arrives, leaving visitors looking at a page with no words on it.

Why this matters

Font files are often large, and while one downloads, a browser that has not been told otherwise may render the text in that font as invisible. On a slow connection this "flash of invisible text" can last seconds: the page looks loaded - images and layout in place - but says nothing. Visitors cannot read, and text-based actions like navigation are effectively missing.

The frustrating part is that the text is already there. One line of per font tells the browser to show it in a fallback font until the custom font is ready.

How to fix it

Add font-display: swap to each @font-face rule, so text renders immediately in a system font and switches when the custom font arrives:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; /* show fallback text immediately */
}

For fonts loaded from a hosting service, use the service's option for this - for example a display=swap parameter in the stylesheet URL - or the current embed code, which usually includes it already.
Choose a fallback font with similar proportions to your custom font, so the swap causes as little movement as possible - see Layout shifts.

How Silktide tests this

Load the page in a real browser, using the device type, connection speed, and test location configured for your speed tests.
Examine each custom font the page uses and check whether its @font-face rule keeps text visible while the font loads.
Report each font file that hides text, with an estimate of how long text stayed invisible.
Grade the page by the total time that could be saved: around 100 milliseconds is graded down, and 200 milliseconds or more is graded as poor.

Troubleshooting

The font comes from a third-party stylesheet

You cannot edit a stylesheet another service hosts, but the fix is usually in how you request it: most font services accept a display option in the URL or offer updated embed code. If a provider offers no way to set this, consider self-hosting the font so you control the rule.

I never see any invisible text

With the font cached, or on a fast connection, the gap is too short to notice - the check matters for first-time visitors on slower networks. There is also a trade-off to know about: with swap, those visitors briefly see the fallback font instead. A brief change of font is almost always better than missing text.

We use an icon font

Swapping an icon font renders placeholder characters where icons should be, which can look broken. For icon fonts specifically, a short blocking period (font-display: block) or replacing the font with SVG icons is often the better choice.