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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-04-17 17:27:00 +0000
Seen: 23 times
Last updated: Apr 17 '23