Jump to content

Ensure text remains visible during webfont load


Recommended Posts

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


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...

Link to comment
Share on other sites

  • 1 year later...

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.


Link to comment
Share on other sites

  • 9 months later...
1 ora fa, Prestachamps dice:


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.

Link to comment
Share on other sites

  • 2 weeks later...


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.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...