Fix the Google Pagespeed "Ensure text remains visible during webfont load"

Hello, can you add the “font-display: swap;” css command in the chat style?

This fix the Google Pagespeed waring “Ensure text remains visible during webfont load”.

Thanks :slight_smile:

1 Like

Hi @tecnico :slight_smile:
You definitely have a point. We already have an eye on this problem but still, thank you for your consideration :+1:

It is a little bit complicated by Google itself as they do not provide font-display attribute at all on their Open Source Fonts project :thinking:

I will let you know as soon as we resolve this issue :wink:

1 Like

Yes I know, in fact I had issues also on my site.

Here you can find some tricks to follow:

I solved the problem by downloading the fonts to my server, so I have much higher performance and complete control.

Have a nice day :slight_smile:

1 Like

Google Page Speed Test Also Show Me This Error On my website And I Check All Internet I didn’t Find Any Easy Solution This Is My website Can You Tell ME the Easy Solution

Hi @guri3807,

As @m.walaszczyk has mentioned earlier, we are aware of that fact, however, the problem is caused by the fact that Google doesn’t provide font-display attribute at all on their Open Source Fonts project.

We understand that it may be problematic, and we’ll try to resolve it, but we can’t say when now.

Hi @guri3807, @tecnico

Good news, Google has published the update regarding Google Fonts, that lets you control web font loading using font-display.

Thanks to it, we were able to make changes that allow our chat window to download fonts in the font-display: swap; configuration.

The way you asked :wink:


Hi all, I’m using Chronus theme for my website Even I’m facing the same issue as the above.

Please find the screenshot below and help me how to sort out this issue.

Thanks in advance.

Hi @criktrik

The screenshot you sent shows the fonts loaded by your website, whereas we use another font (Noto Sans). As the issue is not related to our font and product, we can’t help you with that.

This issue is very common. You can find how to solve it in this article: the guide suggests using swap and also contains some more issues they you may face using Google PageSpeed Insights.
Hope it helps :wink:

1 Like

Does anyone know the reason and solution about this screenshot? My website is showing very bad speed increasing bounce rate. it is also not good for the ranking.

I have same problem on my site: aponu
Can anyone help to fix this problem:

To learn more about how our script is loaded and why it does not affect the overall performance of your website, please check out the following article:
as well as a document that breaks down the loading of our script on a sample page:

Hope it helps!

My website has a speed error in my webmaster panel. All my pages are red. Do any of your friends know the reason for this low speed?وقت-سفارت-آلمان/

well its a common issue as i have faced the same . what you can do is to apply the code that is shared here.

@font-face {  font-family: 'Pacifico';  font-style: normal;  font-weight: 400;  src: local('Pacifico Regular'), local('Pacifico-Regular'), url( format('woff2');  font-display: swap;}

i hope it will help you out and increase the speed and avoid showing invisible text .
google now implementing new parametres to rank a site based on “core web vital” that is going to be one of the ranking factors …that determines how fast is the individual pages of the website or ecommerce store.

I also have the same problem with fonts on my site, and I did not find a solution. The site became very slow and I lost traffic