BugWP logo BugWP
Back to Community
Home / Community / Plugin → Custom fonts – host your fonts locally

Fixing 'Ensure Text Remains Visible During Webfont Load' Warnings with Custom Fonts

11 threads Sep 16, 2025 Plugin → Custom fonts – host your fonts locally

Content

If you're using the 'Custom Fonts – Host Your Fonts Locally' plugin and Google PageSpeed Insights is flagging a warning about ensuring text remains visible during webfont load, you're not alone. This is a common performance recommendation related to how browsers load and display custom fonts. Let's break down what this means and how to fix it.

Understanding the 'Font Display' Warning

This warning appears when a browser doesn't have specific instructions on how to handle text while your custom font is loading. Without these instructions, the browser might hide the text until the font is fully downloaded (a behavior known as a 'flash of invisible text' or FOIT). Google recommends using font-display: swap to tell the browser to display text immediately using a fallback system font, and then 'swap' in the custom font once it has loaded. This creates a better user experience.

How to Apply font-display: swap

The 'Custom Fonts – Host Your Fonts Locally' plugin includes a built-in setting to manage this. Here’s how to configure it:

  1. In your WordPress admin, navigate to Custom Fonts.
  2. Edit the custom font that is causing the warning.
  3. Scroll down to the Advanced section.
  4. Locate the Font Display dropdown menu.
  5. Select Swap from the list of options.
  6. Save your changes.

After changing this setting, you may need to clear your site's cache and any server-level cache for the changes to take effect. Some users have reported that after changing this setting, they also needed to regenerate CSS in their page builder (like Elementor) for the warning to disappear from PageSpeed tests.

What If the Setting Doesn't Seem to Work?

Some users have found that selecting 'Swap' does not immediately resolve the warning, while selecting 'Preload' does. This could be due to caching or how the theme or page builder processes the CSS. If you encounter this, try the following:

  • Clear all caching layers: browser cache, WordPress cache plugin, and server cache (if applicable).
  • Ensure your theme or page builder is one that is compatible with the plugin, as noted in its description. Incompatibility can sometimes cause settings not to apply correctly.
  • Double-check that the change was saved correctly by revisiting the font's settings page.

Alternative: Manual Code Snippet

For advanced users, or if the dropdown setting is unavailable due to a bug, you can apply the swap behavior manually with a code snippet. The 'Custom Fonts – Host Your Fonts Locally' team suggests using a filter. Add the following code to your child theme's functions.php file or a code snippets plugin:

add_filter( 'bsf_custom_fonts_font_display', function( $current_value, $font_family, $data ) {
 return 'swap';
}, 10, 3 );

Warning: Only edit code if you are comfortable doing so and always back up your site first.

Conclusion

The 'Ensure text remains visible' warning is a common SEO and performance check. By using the Font Display setting in the Custom Fonts plugin to apply 'swap', you can often resolve it quickly. If one method doesn't work, try another or check for conflicts with your theme or caching setup.

Related Support Threads Support