Font Display

Why It Matters

• Invisible text frustrates users. Without font-display, some browsers hide text entirely until the custom font loads — a problem called FOIT (Flash of Invisible Text). Users see a blank page even though the HTML is fully loaded.
• Flash of unstyled text is better than nothing. Showing a fallback font immediately (FOUT — Flash of Unstyled Text) means users can start reading right away. The visual jump when the custom font arrives is minor compared to staring at blank space.
• It affects Core Web Vitals. Invisible text delays First Contentful Paint and Largest Contentful Paint because the browser is not rendering meaningful content. Using font-display: swap ensures text is visible immediately.
• Slow connections amplify the problem. On fast connections, font downloads take milliseconds and the issue is barely noticeable. On slow or mobile connections, fonts can take several seconds to load — making the font-display strategy critical.

How to Configure It

1. Use font-display: swap for body text. This shows a fallback font immediately and swaps to the custom font once it loads. Text is always visible and readable. This is the recommended default for most sites.
2. Consider font-display: optional for non-essential fonts. This lets the browser decide whether to use the custom font based on network conditions. If the font does not load quickly, the fallback is used permanently — no jarring swap at all.
3. Add it to your @font-face declarations. The font-display property goes inside your @font-face rule: @font-face { font-family: "My Font"; font-display: swap; src: url(...); }
4. Choose a good fallback font. Pick a system font with similar metrics (x-height, weight, width) to your custom font. This minimizes the visual jump when the swap happens and reduces cumulative layout shift.
5. Preload critical fonts. Combine font-display: swap with <link rel="preload" as="font"> to start downloading fonts as early as possible, making the fallback-to-custom swap happen faster.

Common Mistakes

• Not setting font-display at all. Without it, browsers use their default behavior — which varies. Some block text rendering for up to three seconds waiting for the font. Always set it explicitly.
• Using font-display: block as a default. The block value hides text for a brief period while waiting for the font. This creates invisible text and hurts performance metrics. Use swap instead for most cases.
• Choosing a visually mismatched fallback. If your fallback font has very different letter spacing or line height, the swap from fallback to custom font causes a noticeable layout shift. Match fallback metrics as closely as possible.
• Loading too many font weights and styles. Each font variant (regular, bold, italic, light) is a separate download. Loading five or six variants delays the custom font appearance significantly. Only load the weights you actually use.