Ask Your Question
0

How can I fix this Pagespeed issue: " Ensure text remains visible during webfont load"?

asked 2023-04-17 17:27:00 +0000

david gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
0

answered 2023-04-17 17:27:24 +0000

david gravatar image

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.

edit flag offensive delete link more

Your Answer

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

Add Answer


Question Tools

1 follower

Stats

Asked: 2023-04-17 17:27:00 +0000

Seen: 23 times

Last updated: Apr 17 '23