Ensure text remains visible during webfont load

[DARKF3D3]

Using Google PageSpeed Insights I get that alert on this file: 

/themes/classic/assets/css/570eb83859dc23dd0eec423a49e147fe.woff2

Reading google guide on how to fix this, they say to simply add "font-display: swap;" into css file.

Do you know where? I don't understand which font is this...

[Gerardo Martinez G]

this is originally in
{yourserver}/themes/classic/assets/css/theme.css

you can put this on {yourserver}/themes/classic/assets/css/custom.css

@font-face {
    font-display: swap;
}

clear cache

[DARKF3D3]

Hi, I tried adding @font-face { font-display: swap; } to custom.css but I'm still getting the same alert on  PageSpeed Insights.

Do you know from where those file are loaded? From what I understand those are material icons font, and since I'm not using maybe the best solution it's to not load them on the page.

 

[DARKF3D3]

Any help on this?

[Mediacom87]

Hi,

look in the source code where these fonts are called and apply this directly in the tpl code of the theme or modules

[DARKF3D3]

The problem it's that I can't find where this font is called. I think I have checked every tpl file, but I can't find it.

[Mediacom87]

check the CSS files once it is loaded from them.

[Prestachamps]

Hi @DARKF3D3,

can you send me the URL of your shop, as there are cases when some modules are loading them from their own template files, in the font is not loaded from the theme's files/CSS.

Have a nice day, Leo.

[DARKF3D3]

1 ora fa, Prestachamps dice:

Hi @DARKF3D3,

can you send me the URL of your shop, as there are cases when some modules are loading them from their own template files, in the font is not loaded from the theme's files/CSS.

Have a nice day, Leo.

I sent the url via private message.

[Michael Shelest]

Hi @DARKF3D3

Have you found a solution for that? I just have the same issue. From what I've found: if we are talking about core code (1.7.8) it happens for "Manrope" font. It's included not a usual way using @font-face but using the following experession:

@import "~manrope/complete/font.css";

and only inside it uses @font-face, but it makes impossible to include that other way because we can't change node modules.

From what I've found is only this thing https://www.npmjs.com/package/postcss-font-display which looks like should include "font-display" automatically to the generated css but because of lick of skills I can't include that properly.

Please let me know if you solved it somehow.

Thanks,
Michael