• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
SideGains Logo

SideGains

Blogging Tips & Tutorials

  • Blog
    • Blogging
    • SEO
    • WordPress Tips
    • Tutorials
    • SideGains
    • Motivation
    • Content
    • Social Media
    • Making Money
    • Search Engines
    • Domains & Hosting
    • PPC
    • Frugal Living
  • About
  • Blogging Resources
  • Contact
Home » SEO » How to Ensure Text Remains Visible During Webfont Load

How to Ensure Text Remains Visible During Webfont Load

Last Updated on 15th April 2021 by Paul 10 Comments

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:

Table of Contents
  • What Are Webfonts?
  • How Webfonts Load
  • How to Make Text Visible During Webfont Load
  • Summary

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.

WP Rocket - WordPress Caching Plugin

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:

Webfont Render Process

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


Tips to Improve Webfot Load Speed

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.

Filed Under: SEO Tagged With: Optimization, Page Speed, PageSpeed Insights

Reader Interactions

Comments

  1. Avatar for MalloryMallory says

    30th July 2020 at 2:07 am

    Hi Paul,

    Just to confirm (one more time): I can just add font-display: swap to my additonal CSS area in customize (on WP) without adding anything to the @fontface rule?

    Reply
    • Avatar for PaulPaul says

      30th July 2020 at 7:25 pm

      Hi Mallory. You add “font-display: swap;” or “font-display: fallback” in the rules for @fontface.

      Reply
  2. Avatar for HowardHoward says

    13th June 2020 at 8:32 pm

    Can this “ font-display: fallback;” be added in a plug-in I have called ‘ Simple CSS ? Or additional css on wp dashboard customization or must it be added in the css of the site itself?
    Thanks

    Reply
    • Avatar for PaulPaul says

      13th June 2020 at 11:37 pm

      Hi Howard. You can add it into the plugin or in your WP dashboard customization.

      Reply
  3. Avatar for Manu ChittoraManu Chittora says

    8th June 2020 at 10:28 am

    This method worked properly on my blog. Thanks for helping by sharing this informative peace of information.

    Reply
    • Avatar for PaulPaul says

      8th June 2020 at 9:03 pm

      A pleasure Manu!

      Reply
  4. Avatar for QuyQuy says

    28th April 2020 at 9:18 am

    Hi there,
    I’ve tried font-display: swap; and then font-display: fallback but it did not work…

    Reply
    • Avatar for PaulPaul says

      12th May 2020 at 12:03 pm

      Hi Quy. Send me a message through my contact form and give me the details of your blog and I’ll take a look for you.

      Reply
      • Avatar for IsrealIsreal says

        14th July 2020 at 9:17 am

        Hello,
        How do I implement this code properly on WP dashboard customization?
        Do I just copy and paste “ font-display: fallback;” on the additional CSS?

        Reply
        • Avatar for PaulPaul says

          14th July 2020 at 11:24 am

          Hello Israel. That’s correct… you can add the code to the additional CSS area in WordPress.

          Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Disclosure: This page contains affiliate links from which I may make a commission at no cost to you. See how I make money for more information.

Paul Franklin - SideGains

My name’s Paul.

I’ve been using WordPress to build blogs since 2005. SideGains condenses my 15+ years of experience of blogging, SEO and PPC in one place… I hope it helps YOU!

Find out more about SideGains, what makes me tick & why I started this blog.

SiteGround Banner
WP Engine Banner
SEO PowerSuite - all-in-one SEO tool

  • Blog Post Formatting Guide
  • Blogging Goals Planner
  • Google Analytics Dashboard Sheet

Footer

About SideGains

SideGains is designed to give you the blogging tips & tools you need to create an online income outside of the 9 to 5.

Find out more about SideGains, what makes me tick & why I began the SideGains project.

Information

  • How SideGains Makes Money
  • Privacy
  • Contact Me
  • SideGains HTML Sitemap

Work With Me

  • Hire Me!
  • Guest Writers

Copyright © 2023 SideGains.com

  • Facebook
  • Twitter
  • Pinterest
  • Instagram