To improve performance, it is a good idea to edit from font-display: block, to font-display: swap, for all font faces loaded from all.min css, just like you did in the css framework, for which only congratulations.

Thanks

Hi Adlago,

Using font-display: swap is great for body text but using it on Font Awesome icons would be a poor experience. The Font Awesome developers have purposely used block and their decision was even backed by a Lighthouse maintainer a few years ago.

When using block, nothing is shown until the font has loaded. In most cases, we reserve space for these icons using min-width, which reduces the layout shift when the page renders. As soon as the font loads (which is usually pretty fast once it's been cached), the icons appear. While loading, the page looks like this:

If we switched to swap, random glyphs (usually rectangles with the unicode value) would be displayed while the font loads. Once the font loads, those icons would be replaced with the correct icon. While loading, the page would look like this:

There are no performance improvements of changing block to swap for Font Awesome icons. The font-display property only affects the user experience and has no impact on how fast fonts load. For the moment, we'll likely be sticking with the behavior that the FA developers (and lighthouse maintainer) have decided on.

 

f we switched to swap, random glyphs (usually rectangles with the unicode value) would be displayed while the font loads. Once the font loads, those icons would be replaced with the correct icon. While loading, the page would look like this:

Yes, it is as you say. But using link rel preload font eliminates this issue.

I see that in the head you are using link rel preload font, and that is why I suggest you use display swap.

If you decide to use display block font, as it is now, then using link rel preload font is completely pointless and in a sense slows down rendering.