How can you reduce FOUT/FOIT when loading custom web fonts?

How can you reduce FOUT/FOIT when loading custom web fonts?

• A. Increase the font display duration.
• B. Use font-display: swap to show fallback font until font loads.
• C. Drop the font-face and use system fonts only.
• D. Preload the font with a script.

Answer: (B)

The thing being tested is how fonts load without making users wait or see an empty space. The font-display property on @font-face tells the browser what to do while the font file is still loading. Using the swap value makes text render immediately with a fallback system font, and then swap to the custom font as soon as it finishes loading. This approach keeps content visible right away, avoids long periods of invisible text, and delivers the final typography as soon as it’s ready, which greatly improves perceived performance and user experience. Other options aren’t as effective. There isn’t a real setting called increasing the font display duration, so that doesn’t apply. Dropping the font-face in favor of system fonts defeats the goal of using a custom font. Preloading the font with a script isn’t the standard practice for font loading hints (the usual approach is a proper preload hint or Font Loading API usage).

The thing being tested is how fonts load without making users wait or see an empty space. The font-display property on @font-face tells the browser what to do while the font file is still loading. Using the swap value makes text render immediately with a fallback system font, and then swap to the custom font as soon as it finishes loading. This approach keeps content visible right away, avoids long periods of invisible text, and delivers the final typography as soon as it’s ready, which greatly improves perceived performance and user experience.

Other options aren’t as effective. There isn’t a real setting called increasing the font display duration, so that doesn’t apply. Dropping the font-face in favor of system fonts defeats the goal of using a custom font. Preloading the font with a script isn’t the standard practice for font loading hints (the usual approach is a proper preload hint or Font Loading API usage).