How to Fix “Ensure Text Remains Visible During Webfont Load”

Web developers often face a warning in WordPress: “Ensure Text Remains Visible During Webfont Load”. This issue arises during performance audits. It indicates that web fonts delay text rendering, leading to a poor user experience.

The solution is to optimize web font loading on your WordPress site. Techniques such as preloading, using font-display properties, or hosting fonts locally can help. This ensures that text remains visible during web font loading.

This blog post is your friendly guide to resolving this issue. It’s packed with easy-to-follow instructions and handy code snippets. You’ll see your website running faster, delivering a delightful user experience. Exciting, isn’t it?

How Web Fonts Can Slow Down Your Site?

Web fonts can significantly impact your site’s performance. They require additional HTTP requests, which can delay the rendering of your page. Moreover, larger font files can increase the overall load time.

One of the major issues caused by web fonts is the Flash of Invisible Text (FOIT). It occurs when the browser completely hides text while waiting for a custom font to load. Visitors see a blank space instead, potentially making them think the website is broken or still loading.

This can lead to a poor user experience, emphasizing the need for web developers to optimize web font usage and implement quick fixes to ensure text visibility. It’s crucial to balance aesthetics with functionality in web design.

What Is “Ensure Text Remains Visible During Webfont Load” Warning?

The warning “Ensure Text Remains Visible During Webfont Load” suggests implementing a fallback mechanism in a website’s styling to display text in a default system font while a custom webfont is being loaded.

In simpler terms, this warning implies that your website should show text in a basic default font while it waits for a fancier font to load. This helps visitors read content immediately without waiting for the entire page to look perfect.

Why This Warning Appears in WordPress Sites?

The warning “Ensure Text Remains Visible During Webfont Load” often appears on WordPress sites due to the use of custom web fonts. While enhancing aesthetics, these fonts can slow down the site as they must be loaded each time a user visits.

WordPress themes often use custom fonts to provide a unique look and feel. However, if these fonts are not optimized, or a fallback font is not specified, it can lead to the aforementioned warning. This is a reminder to balance design with performance.

How to Fix the Warning in WordPress?

Fixing the “Ensure Text Remains Visible During Webfont Load” warning in WordPress can be achieved through two primary methods: manual and plugin. Both methods aim to optimize the loading of web fonts, thereby enhancing your site’s performance.

In the following paragraphs, I’ll guide you through the manual method, which involves tweaking your site’s CSS, and the plugin method, which leverages WordPress plugins designed to optimize font loading.

1. Manual Method

To address the “Ensure Text Remains Visible During WebFont Load” warning in WordPress without a plugin, you need to insert the
font-display: swap property in your CSS file where your web fonts are specified.

If you’re using the Astra theme like me, here’s how to add the font-display: swap attribute to your theme file:

• First, log in to your WordPress Dashboard;
• Then, go to Appearance → Theme File Editor;
• Here, you’ll find the style sheet where you can make the necessary changes.

The details in the file indicate that the CSS files for your Astra theme are located in the
assets/css/ directory. To access these files, you’ll need to use an FTP client. Your FTP login credentials can be obtained from your hosting provider.

After connecting with the FTP client, navigate to the wp-content/themes/astra/assets/css/ directory. This is likely where the CSS files for your theme are stored. Remember to handle these files carefully, as changes can affect your website’s appearance and functionality.

•  Look for a file that contains the @font-face declaration.

•  Download the file and open it in a text editor.

• Add font-display: swap to the @font-face declaration for the font.

After making the necessary modifications, save your changes. Then, upload the updated file to the server, replacing the existing one. This action should resolve the issue.

Once these steps are completed, the warning “Ensure Text Remains Visible During WebFont Load” should no longer appear. This indicates that the issue has been successfully addressed, and your website’s font loading is now optimized.

2. With Plugin

Using the Swap Google Fonts Display plugin, you can fix the “Ensure Text Remains Visible During WebFont Load” warning in WordPress. Here are the steps below:

• First, log in to your WordPress Dashboard;
• Then, go to Plugins → Add New;
• Search for Swap Google Fonts Display;
• Install and then Activate the plugin.

With the Swap Google Fonts Display plugin, there are usually no settings that you need to adjust manually. The plugin is designed to automatically modify the loading of Google Fonts by including the font-display: swap property.

Testing Your Website After Optimization

After optimizing your website, it’s crucial to test its performance to ensure the changes have had the desired effect. One way to do this is by using Google PageSpeed Insights. Simply enter your website’s URL into the tool, and it will analyze your site’s performance.

The report will highlight areas of your site that are performing well and those that need further optimization. Attention to the “Ensure Text Remains Visible During WebFont Load” warning. If your optimization was successful, this warning should no longer appear.

You can also use your web browser’s Inspect tool to verify if the plugin is working correctly. This will allow you to check whether the Google Fonts now include the display=swap parameter in their URLs.

Tips for Web Fonts Visibility in WordPress

Keeping text visible while WordPress web fonts load is key for a good user experience. Here are some tips that can help you:

1. Choose the Right Hosting Provider

Select the right WordPress hosting provider that offers high performance. For instance, Cloudways provides a platform optimized for speed and efficiency, with servers powered by leading IaaS providers like DigitalOcean, AWS, and Google Cloud.

2. Choose the Right Web Fonts and Formats

When setting up your website, pick fonts that load quickly. Use the WOFF2 format for fonts, which offers compression and faster loading times. Include only the font weights and styles you will use on your site.

3. Implement Asynchronous Font Loading Techniques

These techniques give you better control over how and when fonts are loaded, improving user experience. Here’s how to do it:

• Choose a font-loading library like Web Font Loader, developed by Google and Typekit.
• Add the Web Font Loader to your WordPress site by editing your functions.php file. Here’s the code to include:

function load_fonts() {
    wp_enqueue_script( 'webfontloader', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js', array(), null );
}

add_action( 'wp_enqueue_scripts', 'load_fonts' );

function add_font_loader_script() {
    echo "<script>
    WebFont.load({
      google: {
        families: ['Open Sans:400,700', 'Roboto:400,700'] // Replace with your fonts and weights
      }
    });
    </script>";
}

add_action( 'wp_head', 'add_font_loader_script' );

• Save this code at the bottom of your functions.php file.

4. Test Webfont Load Times and Visibility on Your Website

Regularly test webfont load times and visibility on your website. Use the network panel in developer tools to see how long web fonts take to load. Run your site through Google PageSpeed Insights to check for font loading issues.

Summary

Optimizing web font loading is crucial for your WordPress site’s performance. Implementing the discussed techniques can fix the “Ensure Text Remains Visible During Webfont Load” warning. This enhances your site’s speed and user experience.

A faster website means better user engagement, lower bounce rates, and potentially higher conversions. Start implementing these strategies today. Take your WordPress site to the next level with these improvements. If you’ve any questions, write in the comments.

Liza Rajput

Liza Rajput is a Technical Content Producer at Cloudways. Being a software engineer, she loves to play with data and its processes and wishes to grow and excel in Data Science and Big Data Engineering. She has also been an avid reader and exceptional writer, with sufficient experience in technical, research-based, and creative writing.