How to Ensure Text Remains Visible During Webfont Load

If you’ve recently tested your page load speed using Google’s PageSpeed Insights (PSI) tool you might have had a nasty surprise. There are several factors that contribute to slow page load. One of them (Ensure text remains visible during webfont load) is VERY easy to get over.

Firstly I’ll explain what webfonts are. Secondly I’ll explain what webfont load is. Lastly I’ll give you the simple steps you can take to ensure your text remains visible during webfont load. This will improve the overall load time of your pages.

Anyone can do this and the fix will literally take you a few minutes. All you need to be able to do is edit your CSS file (the bit that relates to your webfont).

This post will look at the following areas:

What are Webfonts?

Before the mid-1990s there was no way specify the font you wanted your site to render.

This improved somewhat around the mid-1990s, when the <font> tag became available in HTML. At that point you could specify a font, but it was only visible to people who had the font installed on their computers. If they didn’t have the font installed, browsers would render a default font such as sans-serif.

Towards the end of the 1990s, Internet Explorer made webfont downloading possible. This meant you no longer needed to have a specified font installed on your computer to see it. Since those days, webfont downloading has become commonplace for:

• Desktop browsers such as Chrome, Firefox, Safari and Opera.
• Mobile browsers like Chrome, Firefox and Opera for Android, as well as Safari on iOS.

So I’ll sum up this explanation. Webfonts are fonts that are available to use by site owners, that their visitors can see even if they don’t have it installed on their device.

One final thing to note about webfonts. If there is a problem loading the font, the browser will fallback to a default unstyled one it can render.

How Webfonts Load

When a browser attempts to render a page, it looks at the HTML and CSS stylesheets of the page. It uses these to build a render tree to present the page to the user in the required format.

From this, the browser determines page layout and how to “paint” the page. Painting in this conetxt is the act of filling the page pixel by pixel.

When the browser sees a page needs a webfont, it stops building the page to locate and download it. This is called render blocking.

Render blocking makes all text on the page invisible. This invisibility period is known as Flash of InvisibleText (FOIT).

If the browser cannot download the webfont in under 3 seconds it will timeout and swap it for a default fallback font. The fallback font remains until the webfont fully loads. This is known as Flash of Unstyled Text (FOUT).

If the webfont loads in under 3 seconds, the browser swaps the fallback for the required webfont. However, if for some reason the webfont download fails, the browser continues using the fallback font.

The process for rendering webfonts in this way looks like this:

Search engines like Google want web pages to deliver content as quickly as possible to provide a better visitor experience. Page load speed is very important for your site!

This is why page load speed testing tools like Google’s PSI advise you to ensure text remains visible during webfont load, to counter any lag in rendering a meaningful page.

How to Make Text Visible During Webfont Load

As I mentioned, if you are using a webfont there is a very simple fix for this issue in your CSS.

I’ll give you an example. For SideGains I use the Nobile font, which is available as a Google webfont here: https://fonts.google.com/specimen/Nobile

If you’re using a webfont, you’ll already have set up in your CSS a @font-face rule (see my example below).

@font-face {
  font-family: 'Nobile';
  font-style: italic;
  font-weight: 400;
  src: local('Nobile Italic'), local('Nobile-Italic'), url(https://fonts.gstatic.com/s/nobile/v10/m8JRjflSeaOVl1iGXJ3aULFvbGOC5dI.woff2) format('woff2');
  font-display: fallback;
}

The important line to add to your @font-face rule is the following line (included in my example above):

  font-display: fallback;

The fallback rule forces the browser to use a very small period in which to render the webfont. This is usually 100ms or less.

If it exceeds this time the browser uses its default font until the webfont loads, at which point it swaps it.

If the webfont doesn’t load, the fallback font will remain until the page is refreshed or another page visited.

Want to Really See a Difference in Your Page Load Speed?

SiteGround took my mobile page load speed from 77 to 93 in Google’s PageSpeed Insights tool… read how in my SiteGround review.

You can sign up for SiteGround hosting by clicking the banner below.

Summary

• There are tools you can use to understand how quickly your pages load, such as Google PageSpeed Insights (PSI). If you use a webfont, the PSI tool shows if you need to do something to make your text remain visible as the webfont is loading.
• Fonts downloaded from the Web to use on a Web page at the point the page loads are called webfonts.
• Webfonts often take time to load. This has a knock-on effect on the time it takes for a page itself to fully load.
• It’s important that Web pages load as quickly as possible.
• The ensure text remains visible during webfont load diagnostic message means your webfonts are slowing down your page load.
• You can reduce the time it takes to render a page by modifying your CSS and adding font-display: fallback; in the rules relating to @font-face.

Other Page Speed Optimization tips: What is First Contentful Paint in the Google PSI Tool?

That’s all folks!

Paul

If you have an alternative suggestion for handling this issue, or you’d like to ask me a question, please drop me a comment below.