Feature request: Set font-display rule to block to make Lighthouse happy

[tagliala]

Is your feature request related to a problem? Please describe.
There is a problem when validating Font Awesome websites using the css. In FA 5.7.0, we have switched to font-display: auto to allow users to use (the wrong) swap value, but now we have the chance to use font-display: block and get rid of the warning

Describe the solution you'd like
If we set the default font-display to block, as agreed in #14387 (comment), we can pass the validation without breaking stuff and fix rendering on browsers that do not honor the "similar to the block value" behaviour.

Describe alternatives you've considered
Ask users to change the scss files and recompile on our behalf, or override the css

Additional context
Ref:

• Font-Display check should consider icon fonts GoogleChrome/lighthouse#10127
• Lighthouse Issue with Font Performance for font-display #14387
• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Feature request checklist

• This is a single feature (i.e. not a re-write of all of Font Awesome)
• The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[deLisle]

Looking forward to getting this fixed!

[guix77]

Following this

[robmadole]

I've got this on the schedule for 5.12.2. I don't have a release date right now but it will go out with the next version of FA.

[MDzyga]

@robmadole
Could you release this no later than next Wednesday? My client really need this fix ASAP.

[robmadole]

@MDzyga we can't make any commitments like that, sorry

[tagliala]

@MDzyga

My client really need this fix ASAP.

You can customize the css and host it on your server

Anyway, in my understanding, this fix is just a convention to avoid the lighthouse warning, there are no performance benefits

Also FWIW you don't lose anything on the performance score for this showing up in the audit, and for fonts that are going to change to block it's really just an 'ignore this URL' type of signal anyhow, so feel free to ignore that LH result in the meantime.

Ref: GoogleChrome/lighthouse#10127 (comment) (by Lighthouse's creator)

[guix77]

@MDzyga Could you fix your attitude no later than next Wednesday ? I really need it ASAP.

[MDzyga]

Sorry guys, my client has a bit big pressure on audit logs.
But I think I could fix it ;)

[robmadole]

@MDzyga it never hurts to ask :) The reason that we can't commit to that is that we have a lot of other dependencies that are still up in the air for 5.12.2. While the fix for this is simple, it's just one piece of luggage on a large train with other bags.

[MDzyga]

@robmadole I understand.
Do you know how can I set cache and change link rel on preload?
here is my issue with screenshots from lighthouse: #16271

[robmadole]

@MDzyga I responded in that ticket. Please do not cross-post in other issues to try and get responses. That just clutters up everyone's email and irritates the people who are trying to provide help.

[tagliala]

Hi, could you please check 5.13.0?

[tagliala]

I've checked myself, looks like it has been fixed

Green: https://tagliala.github.io/fa16077-513.html
Warning: https://tagliala.github.io/fa16077-512.html

Closing here, but free to comment if anything is still wrong

[oleksandrzaiats]

I've checked myself, looks like it has been fixed

Green: https://tagliala.github.io/fa16077-513.html
Warning: https://tagliala.github.io/fa16077-512.html

Closing here, but free to comment if anything is still wrong

Hi!
It seems that the issue still persist when using Font Awesome Wordpress plugin (https://wordpress.org/plugins/font-awesome/). I am using that plugin (with the latest version of font - 5.15.2) and I get Leverage the font-display CSS feature... in the report from Lighthouse. This warning displays fonts from urls like https://use.fontawesome.com/releases/v5.15.2/webfonts/fa-** as affected.
I checked the code of that plugin and it seems like there is no font-display set. I did not find any issue tracking for that plugin so I decided to write here.
Is it possible to fix that or redirect me to the proper place where I should rise that issue? Thanks!

[tagliala]

Hi, I'm not familiar with the official wordpress plugin.

This is the proper repo to report issues: https://github.com/FortAwesome/wordpress-fontawesome

I checked the code of that plugin and it seems like there is no font-display set. I did not find any issue tracking for that plugin so I decided to write here.

Before opening a new issue, please share your website so I can take a look

[oleksandrzaiats]

@tagliala Nice! Thanks for the link.

[robmadole]

@oleksandrzaiats we have font-display set in the CSS. You'll have to take this up with the Lighthouse team as it appears they want swap?

[oleksandrzaiats]

@robmadole I have looked through the WP plugin and did not manage to find any font-display there.
That plugin adds such css where there is no font-display specified:

@font-face {
font-family: "FontAwesome";
src: url("https://${license_subdomain}.fontawesome.com/releases/v${version}/webfonts/fa-brands-400.eot"),
		url("https://${license_subdomain}.fontawesome.com/releases/v${version}/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
		url("https://${license_subdomain}.fontawesome.com/releases/v${version}/webfonts/fa-brands-400.woff2") format("woff2"),
		url("https://${license_subdomain}.fontawesome.com/releases/v${version}/webfonts/fa-brands-400.woff") format("woff"),
		url("https://${license_subdomain}.fontawesome.com/releases/v${version}/webfonts/fa-brands-400.ttf") format("truetype"),
		url("https://${license_subdomain}.fontawesome.com/releases/v${version}/webfonts/fa-brands-400.svg#fontawesome") format("svg");
}

[robmadole]

@oleksandrzaiats ah thank you. I was able to find it with that. I will get a PR in the Wordpress plugin repo for that.

[oleksandrzaiats]

@robmadole Great, thanks! Actually I have create an issue there already FortAwesome/wordpress-fontawesome#108.
I think you know it, but just in case, there are multiple constructions (like I mentioned) in the plugin that should be fixed.

[ma-deldari]

I've checked myself, looks like it has been fixed

Green: https://tagliala.github.io/fa16077-513.html
Warning: https://tagliala.github.io/fa16077-512.html

Closing here, but free to comment if anything is still wrong

I update font Awesome 5.10 to 5.15 it work for me thanks alot