No results found. Try again with different words?

Search must be at least 3 characters.

Fix the “Ensure Text Remains Visible During Web Font Load” Error In Astra

Sidebar Image

Did not find a solution? We are here to help you succeed.

When you analyze your website with PageSpeed Insights, you might encounter the “Ensure text remains visible during web font load” error.

This article explains how to fix this error while using the Astra theme.

Why This Error Occurs

When a browser detects that text has a custom font applied, it waits for the font to download, causing the text to remain invisible until the download is complete.

This issue typically occurs when using custom fonts or plugins to insert custom fonts, not with default fonts.

When you test your website’s speed, this browser behavior can trigger the “Ensure text remains visible during web font loading” error.

How to Solve This Error

To fix this error, ensure that the browser displays default fonts while loading your custom font.

Once the custom font is downloaded, the browser will swap the default font with the custom one.

Google Fonts

For Google fonts, you can simply use the plugin named “Swap Google Fonts Display” which can be downloaded from here.

Once you have downloaded and installed the plugin, it will automatically search for any Google Fonts script and will append display=swap to the URL.

This will ensure that the browser loads the default fonts during the time any custom fonts are being downloaded.

Other Fonts

When you are using a plugin to insert custom fonts to your website, you will need to either contact the plugin creators or you can edit the plugin code.

Here is an example of how to edit the plugin code. In this example, we are using a plugin developed by us named “Custom Font”.

Step 1: From your WordPress dashboard, navigate to the Plugins and select Plugin File Editor

Step 2: Select the plugin that is responsible for injecting custom fonts on your website.

Step 3: Locate the .css file inside the plugin code. In our case, the CSS file is located inside assets > CSS > bsf-custom-font.css. Please note that every plugin will have different paths for the CSS file.

Please contact the plugin creators, if you are not sure where to find the css file of the custom font.

Step 4: Copy and paste the code below at the bottom of the .css file and click on the update file button.

@font-face{
	font-family: cambodian
	font-display: swap;
}

Once you have followed the steps, the error “Ensure text remains visible during web font load” will be fixed.

That’s it! If the error still persists, feel free to contact us. We’re always here to help!

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Membership Retention Checklist Download

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form