One of the downsides of using web fonts is that if a font is not available on a user’s device, it must be downloaded. This means that before the font becomes available the browser has to decide how to handle the display of any block of text that uses that font. And it needs to do so in a way that doesn’t significantly impact the user experience and perceived performance.
[…]
Enter the font-display descriptor for the @font-face at-rule. This CSS feature introduces a way to standardize these behaviors and provide more control to developers.
Before looking in detail at the various features offered by font-display, let’s briefly consider how you might use the feature in your CSS.
[…]
You can watch this behavior in the following video, which uses a simple test page that incorporates a specific web font for its heading:
[…]
And there you have it, the heading now renders with the desired web font.
[…]
I hope this gives you a decent overview of the font-display descriptor and how this feature foreshadows a strong future for font rendering on the web.
[…]
