Revision history [back]

To fix the "Ensure text remains visible during webfont load" issue in Google PageSpeed Insights, you need to use the font-display CSS property for your web fonts. This property determines how text is rendered while a custom font is loading. The recommended value for optimal performance is swap.

Follow these steps to implement the font-display property with the swap value:

Locate the CSS file or the <style> block where the @font-face rule for your custom font is defined.

Add the font-display: swap; property to the @font-face rule. Here's an example:

@font-face {
  font-family: 'YourCustomFont';
  src: url('path/to/your/custom-font.woff2') format('woff2'),
       url('path/to/your/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Add this line */
}

Save the changes to your CSS file or HTML file containing the <style> block.

Clear your browser cache and reload the page to see the changes.