[Support request] Google Lighthouse warning Ensure text remains visible during webfont load

[Ron]

Good Day
I use google lighthouse to keep my website fast and up to date
sometimes I get a warning concerning woff2 font
here is the error:
Ensure text remains visible during webfont load
Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading
…fonts/generatepress.woff2

Is there a way to ensure text is user-visible while webfonts are loading?
Thank You
Ron

[Tom]

Hi there,

That font doesn’t have any text – it displays icons.

It’s something you can safely ignore for now until we add an option to use inline SVGs for the icons instead 🙂

[jbex]

Yo estoy en la misma circunstancia, me sale el siguiente mensaje:

Asegúrate de que el texto permanece visible mientras se carga la fuente web
Utiliza la función de CSS font-display para que los usuarios vean el texto mientras se carga la fuente web. Más información
URL
Ahorro potencial (kB)
…fonts/generatepress.woff2
130 ms
Existe alguna manera de solucionar o eliminar esa fuente?
=================
Google traductor
=================
I am in the same circumstance, I get the following message:

Make sure the text remains visible while the web source is loading
Use the CSS font-display function for users to see the text while loading the web font. More information
URL
Potential savings (kB)
… fonts / generatepress.woff2
130 ms
There is some way to fix or eliminate that source

[David]

Hi there,

as Tom said the font only displays the theme icons – so there is no fallback font for it. We will be providing an option to replace that font with SVGs in a future theme update. In the meantime you can ignore that part of the lighthouse report.

[sipahi]

@david if you could inject font-display:swap, that would do the trick..

@font-face {
  font-family: "Open Sans Regular";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
  font-display: swap;
}

in which file generatepress.woff2 is declared in generatepress?

[David]

One of our users provided a solution here:

https://generatepress.com/forums/topic/usage-of-font-display-for-generatepress-woff2/#post-1081094

However, the best thing to do is to switch Icon Type to SVG in Customizer > General – which completely eliminates the font request and any google warning.

[sipahi]

switching to svg instead of font is a great solution. I’m so glad I purchased this theme.

[David]

Glad your enjoying the theme 🙂

[Richard]

Hi,
Can I ask has this been done yet as I get a rather slow GTMETRIX result and it is slowing down the page quite a bit. Is these an easy solution to this now.
Thanks for your time.

[David]

Hi there,

if you want to raise a new topic where you can share a link to your site i’ll take a look at the issue.

[Richard]

Hi,

Thanks managed to sort it out using SVG
Cheers

[David]

Glad to hear that

[Author]

Posts