Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

[IrynaShcharbakova]

Describe the bug
What happened? What are you seeing? How did you arrive here?
First of all, I am not sure it is a bug.
I get error in Page Speed Insight "Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading." with a list of Awesome Font I am using.
Since I do not have access to your css, may I ask you to change in css font-display: auto to font-display: swap?
It should help. Or you may know other solutions to resolve that issue.
The website is
www.phodestravel.com

To Reproduce
Insert a URL to your test case - use codepen.io, jsfiddle.net, jsbin.c

om, codesandbox.io, or whatever.

Describe any details about the test case that we need to know like "whatever you do, don't click the red button."

Expected behavior
How would you like this to work instead?

Screenshots
If applicable, add screenshots to help explain your problem.

Version and implementation
Version:
Browser and version:

• SVG with JS
• Web Fonts with CSS
• SVG Sprites
• On the Desktop

Bug report checklist

• I have filled out as much of the above information as I can
• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Sorry, but the swap option is not what you want with an icon font. You will find a lot of information at #14387

The best value we can use for an icon font is block, otherwise you will see a blank square while icons are loading.

You can change that css property with a custom version of Font Awesome, but I recommend to not do that. Ref: #14387 (comment)

If you have concerns about performance, you can:

• inline plain svgs
• customize the javascript svg framework with webpack (or rollup or similar) with tree shaking

Hope it helps

Closing here

[mehedimart]

Hi. This the problem of Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading in my website when i test the page speed of my website abcdigitalupdate.com . However please help me How to resolve the problem of Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

[tagliala]

Hi @mehedimart

However please help me How to resolve the problem of Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

Icon fonts must not be visible when webfonts are loading. We are going to remove this warning in a new version of font awesome (by setting font-display to block), but the actual behaviour of not showing the text is correct 👍

Hope it helps