Make sure text remains visible during website font loading

Dear Sirs hi.

I get a message from PageSpeed Insights about (Make sure text remains visible during website font loading).

I am hosting fonts locally Woodmart theme > Theme Settings > Custom fonts.

I have renamed the font names to the fonts I am using i.e Manrope as Manrope Light-local, Manrope Medium-local.

I have put in Theme Settings > Performance > Fonts & Icons > “font-display” for text fonts to swap.

I am using WP Rocket caching plugin.

I have followed your guide as per settings for the wprocket i.e. https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/

I still get the warning Make sure text remains visible during website font loading for fonts – I enclose screenshot.

Your assistance is needed.

Best regards
Georgios

Attachments:

You must be logged in to view attached files.

Hello,

We just tested your home page but don’t see this warning in Page speed report. Here is a screenshot https://gyazo.com/8f70009579bdc44332e400154ba54c7f

Kind Regards

Dear Sir hi.

Yes, this is correct.

Since we activated Wprocket > Settings > File Optimization > CSS Files > Optimize CSS delivery > REMOVE UNUSED CSS, and with your assistance managed to overcome the problem of the single product page the image pop up, the ISSUE with the warning “Make sure text remains visible during website font loading” has gone as well.

If we deactivate the REMOVE UNUSED CSS function in the WP rocket the issue will come back.

What shall we do ? Shall we deactivate the function REMOVE UNUSED CSS and deal with the problem ?

Best regards
Georgios

Hello,

Please, deactivate it now so we can see the warning and check what is wrong.

Kind Regards

Dear Artem

We have deactivated WPRocket > FILE OPTIMIZATION> CSS Files > Optimize CSS delivery

We have cleared Cache.

We enlcose Pagespeed Insights report with the fonts problem.

Please let me know.

As we can see, the font-display rule is currently set to “Auto”. Try to change it to “Swap” in Theme Settings and check again.

Thank you for your reply. However..

Theme settings > Performance > Fonts & Icons > font-display

Is already set to “Swap” – unless there is other section we should change it too.

Please clarify

Please, send us your admin access so we can check what is wrong.

Thank you – Enclose the credentials

It looks like the WP Rocket or some other plugin overrides this value in the CSS file. Because when we load an uncached version of the page it shows “swap”. Here is a screenshot

Not cached page: https://gyazo.com/75a93eee20faf80dbb6ba8e10e4db4d4

Cached page: https://gyazo.com/77adf8379cb837cdd13ed11dd1805476

OK – do you have any suggestions ?

You need to deactivate all plugins one by one and see which of them causes this problem.

[Author]

Posts