Font-Display Property: Block, Swap, Fallback, Optional
Font-display controls how the browser handles the gap between fallback and web fonts. Here is how I choose the right value per use case. The font-display property is the single most important tool for controlling how web fonts affect the user experience during loading, and yet it is still misunderstood and often left at its default. The property accepts five values, each defining a different trade-off between showing text immediately and showing it in the chosen typeface. After using every value in production, I have a clear decision tree for which one to use in each situation. The Four Meaningful Values The auto value lets the browser decide, which usually means a blocking period followed by a swap. This is the default and the one I almost never want. The other four values each define a specific blocking period and swap behavior, and choosing between them is the core decision. block gives a short blocking period of about three seconds, during which text is invisible, then shows the fallback and swaps when the web font arrives. Use this when the web font is essential to the design and showing fallback text would be worse than showing nothing briefly. swap shows the fallback text immediately and swaps to the web font whenever it arrives, with no blocking period. Use this for body text where readability matters more than the specific typeface.