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

The "Ensure text remains visible during webfont load" warning usually indicates that your website may display invisible text while fonts are loading. Here's how to address this in Webflow:

​

1. Use Font Display Property

• Set the font display property for your fonts to ensure they load in a user-friendly way. Webflow does not directly provide a feature to set this, but you can add custom code to apply it.
• Go to Project Settings and navigate to the Custom Code tab.
• In the Head Code section, add:

  ```css

  <style>

    @font-face {

      font-family: 'Your Webfont Name';

      src: url('link-to-your-webfont');

      font-display: swap;

    }

  </style>

  ```

• Replace 'Your Webfont Name' and 'link-to-your-webfont' with the appropriate values for your project.

​

2. Optimize Font Files

• Ensure fonts are in a modern format like WOFF2, which loads faster and is widely supported.
• Limit the number of font weights and styles used on your site to minimize loading time.

​

3. Use Fallback Fonts

• Set up fallback fonts in CSS to ensure text remains visible even if the web font is slow to load.
• You can do this in Webflow Designer by opening the Typography settings and selecting a generic font family as a fallback.

​

Summary

Address the "Ensure text remains visible during webfont load" warning by setting the font-display to swap, optimizing font files, and using fallback fonts to maintain text visibility during web font loading.