font-display: auto

font-display: block

font-display: swap

font-display: optional

font-display: fallback

auto - whatever font display the user-agent uses. Most default is similar to block.

block - block gives the font face a short block period (3s in most cases) and an infinite swap period. The browser draws "invisible" text at first if the font is not loaded, but swaps the font face in as soon as it loads.

swap - gives the font face a zero second block period and an infinite swap period. This means the browser draws text immediately with a fallback if the font face isn’t loaded, but swaps the font face in as soon as it loads.

fallback - gives the font face an extremely small block period (100ms or less) and a short swap period (three seconds is recommended in most cases). In other words, the font face is rendered with a fallback at first if it’s not loaded, but the font is swapped as soon as it loads. However, if too much time passes, the fallback will be used for the rest of the page’s lifetime. fallback is a good candidate for things like body text where you’d like the user to start reading as soon as possible and don’t want to disturb their experience by shifting text around as a new font loads in.

optional -   gives the font face an small block period (100ms or less ) and a zero second swap period. Similar to fallback, this is a good choice for when the downloading font is more of a “nice to have” but not critical to the experience. The optional value leaves it up to the browser to decide whether to initiate the font download, which it may choose not to do or it may do it as a low priority depending on what it thinks would be best for the user.

Truncated from