Backed by Awesome Motive.
Learn more on our Seahawk Blog.

How To Ensure Text Remains Visible During Webfont Load On WordPress?

How to Ensure Text Remains Visible During Webfont Load on WordPress

You may have seen PageSpeed Insights Warning of “ensure text remains visible during webfont load” when testing your website speed. Your website may be ready to be painted by your browser even before your web fonts have been entirely downloaded. Therefore, users will not be able to see or access your content until your web font has been downloaded. During this time, it will be concealed from view. This is referred to as the Flash of Invisible Text (FOIT) issue.

A better user experience may be achieved by ensuring that your text continues to be visible during the loading process of the web font. It helps to eliminate blank pages as well as unwanted changes in layout.

PageSpeed Insights warning

How do Web Font Loads Affect Page Performance?

It affects in the following ways:

  • Impacts PageSpeed Insights Score
  • Affects the Cumulative Layout Shift grade
  • Grades of First Contentful Paint and Largest Contentful Paint (Core Web Vitals)
  • User Experience and Conversion Rates

The absence of text also impacts the user experience during Webfont loading: no one likes to access a website with a blank page. In a few seconds, users can get a good sense of whether or not a site contains the information they’re looking for by reading its main title and text.

It is essential to avoid sudden layout shifts caused by web fonts to optimize and improve the Cumulative Layout Shift grade. Ensuring your text remains visible during loading allows you to prevent unexpected content moves (without user interaction). Web fonts can cause layout shifts if invisible text flashes when downloaded and rendered. 

How to Make sure that the Text Remains Visible While Loading Web Fonts

This particular instant is referred to as the Flash of Invisible Text (FOIT). The error message “Ensure text stays visible during Webfont load” appears because of this FOIT, which is responsible for its appearance.

Font-display: swap

The font-display property is a CSS descriptor that can be accessed in all contemporary web browsers. The font-display descriptor looks at whether or not the font was downloaded and the date it was downloaded to decide how the font should be displayed. For example, a rule that uses @font-face makes use of the font-display attribute.

There are many distinct variables for how fonts are shown, including block, swap, fallback, and optional. Use the swap value to prevent FOIT from occurring, and use the swap value to ensure that the text appears on the screen as quickly as is humanly feasible.

font display swap will fix the FOIT issue

Use the Swap Google Fonts Display plugin in WordPress to automate this. Elementor has an inbuilt feature for Google fonts swap. Other optimization plugins like WP Rocket, Flyingpress, Perfmatters offer this out of the box.

For faster font loading, use preconnects & preload :

<link rel='preload' href='/font.woff2' as='font' crossorigin>

This will also reduce CLS.

Wrapping Up

This guide explains how you can fix the “flash of invisible text” issue on page speed insight by ensuring text remains visible during Webfont loading.

Page loading time and page speed are important factors in providing a good user experience, and fixing this issue can improve this experience significantly. If a page does not show everything over it, it is not considered loaded. Therefore, to avoid timeouts and provide users with the balance, speed, and stability they want, you must reduce the content loading time on the page.

Speed Up WordPress Performance with our WordPress site optimization services!

Related Posts

AI web design templates have truly revolutionized the way we create WordPress websites. With the

If you’ve got a digital storefront, you’re probably familiar with the exhilarating highs of making

Let’s talk about WordPress maintenance services! Running a website has its own set of responsibilities

Komal Bothra May 17, 2024

23+ Best WordPress Development Agencies in India for 2024

On the hunt for the best WordPress development services in India? You need not worry

Agency WordPress
Komal Bothra May 10, 2024

How to Force HTTPS on Your WordPress Site (3 Simple Methods)

Every click, every visitor matters. Yet, a 'Not secure' warning can erode trust swiftly. With

Komal Bothra May 7, 2024

Figma Vs WebFlow: Which is Better in 2024?

Whether you are a product designer or UI developer, both are responsible for building products

Compare Design

Get started with Seahawk

Sign up in our app to view our pricing and get discounts.