Correct font-display value for icon fonts

Question

font-display is a new CSS property that allows developers to control how fonts are rendered depending on if they load quickly enough. There's been a few articles on it:

• Controlling Font Performance with font-display - Google Developers
• font-display for the Masses

None of them mention icon fonts. The specification does have an example that mentions icon fonts for the block value, but to me it doesn't make sense to use that:

'block'

Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period .

If I understand the specification correctly, this means if the icons haven't loaded after the "short block period", the fallback font will be used, resulting in random letters appearing in their place.

If I use the optional value, the random letters will never appear but neither will the icons if they haven't loaded in the "extremely small block period".

There doesn't appear to be a value for giving an infinite block period without swap (so it would show invisible text until and unless the font loads). Is there a reason behind this and is there a workaround?

Answer 1

font-display: block;

As you commented, block still has a swap period; so it's still rendered until it's loaded.

Quoting Chris Coyier :

Wanna hear something quite unfortunate? We already mentioned font-display: block; . Wouldn't you think it, uh, well, blocked the rendering of text until the custom font loads? It doesn't. It's still got a swap period. It would be the perfect thing for something like icon fonts where the icon (probably) has no meaning unless the custom font loads. Alas, there is no font-display solution for that .

Considering alternatives:

I've also been there. If you have the chance, you might need to switch to SVG for icons. It has a few advantages over font-icons: SVG is better at pretty much everything than icon fonts .

Even Zach Leatherman, web fonts expert, has opinions about it on his very famous Comprehensive Guide to Font Loading Strategies .

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.