How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?

The "Ensure text remains visible during webfont load" warning appears when your website text is not visible until the webfont has fully loaded. Follow these steps to fix this issue in Webflow.

​

1. Use a Fallback Font

• Go to your CSS settings and specify a fallback font stack. This allows the browser to display the default font while the custom webfont is loading.
• Example: "font-family: 'Your Webfont', Arial, sans-serif;"

​

2. Optimize Webfont Loading

• Choose the swap value for the font-display property. This will make the text appear with the fallback font and swap to the custom webfont once it has loaded.
• Add this in your CSS font-face declaration: font-display: swap;

​

3. Reduce Webfont File Sizes

• Optimize your font files using tools like Font Squirrel or Google Fonts to reduce the file size, which will speed up loading times.

​

4. Use Fewer Font Variations

• Limit the number of font weights and styles you are using in your design to reduce the amount of data that needs to be loaded.

​

5. Load Fonts Asynchronously

• Although not directly supported in Webflow, you can achieve asynchronous font loading using the Web Font Loader script if you have custom code access. Use responsibly within Webflow's Embed component.

​

Summary

To fix the "Ensure text remains visible during webfont load" warning, specify a fallback font in your CSS, optimize webfont loading with font-display: swap, and reduce font sizes and variations. This ensures that your text is visible while custom fonts are loading.