Ensure text remains visible during webfont load

Hi There,

We’re using PageSpeed Insights to fix the page loading speeds on our site.

In the diagnostics for Mobile, it is saying that we need to “Ensure text remains visible during webfont load” for the “Simple Line Icons” which are located in the following folder:
https://hnwgallery.com/wp-content/themes/basel/fonts/

To fix this, we need to add “font-display: block;” for the “Simple Line Icons”.

Here are the PageSpeed Insights results, in case they are helpful: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fhnwgallery.com%2F

And here is a screenshot with additional information, in case it is helpful:
https://hnwgallery.com/fireshot-screen-capture-1405-pagespeed-insights-developers_google_com_speed_pagespeed_insights__urlhnwgallery_com/

I have written the following code to fix this issue, but I’m sure there are errors.

Can you please look at the code in the attached document to make sure it is correct, before I add it to “Customize CSS”?

Thanks very much.

Attachments:

You must be logged in to view attached files.

Hello,

The code seems to be correct but we can’t 100% guarantee that it works as you expected since it is a third party code. By the way, we are working on such an option for our theme and hope to release in our future updates.

Kind Regards

Thanks Artem,

You will notice in this line of code there are two blank lines:

src: local(‘_______’), local(‘_________’),

Can you please help me fill in those blank lines?

I need to know what Basel calls the “Simple Line Icons” locally, or I cannot use the code.

Thanks

Sorry, but we don’t know what should be there.

[Author]

Posts