Font-awesome: 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 https://github.com/FortAwesome/Font-Awesome/issues/14387#issuecomment-567093531, 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:

• GoogleChrome/lighthouse#10127
• #14387
• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Feature request checklist

• [x] This is a single feature (i.e. not a re-write of all of Font Awesome)
• [x] The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
• [x] 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: https://github.com/GoogleChrome/lighthouse/issues/10127#issuecomment-574794516 (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: https://github.com/FortAwesome/Font-Awesome/issues/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