Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Correct font-display value for icon fonts

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?

like image 361
rink.attendant.6 Avatar asked Mar 24 '18 04:03

rink.attendant.6


People also ask

Is there a font for icons?

Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. They're popular for web designers since you can style them with CSS the same way as regular text.

What is font-display property?

The font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.


1 Answers

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.

like image 69
Paul Melero Avatar answered Sep 19 '22 17:09

Paul Melero