Senior LevelCSS & Modern Layouts
How do you optimize web font loading to prevent FOUT and FOIT?
❓ Interview Prompt: Explain font-display strategies, preloading, subsetting, and the Flash of Unstyled/Invisible Text problem.
FOUT (Flash of Unstyled Text):
Fallback font displays first, then swaps to the web font when loaded. Causes a visual jump.
FOIT (Flash of Invisible Text):
Browser hides text entirely until the web font loads. Worse UX — blank text blocks.
font-display Values:
•
swap: Show fallback immediately, swap when loaded (prevents FOIT, allows FOUT).•
optional: Only use web font if it loads within ~100ms. Best for performance.•
fallback: Short invisible period, then fallback, then swap.•
block: Long invisible period (causes FOIT — avoid).Optimization Strategies:
1
Preload:
<link rel="preload" href="font.woff2" as="font" crossorigin>2
Subsetting: Only include characters you need (Latin, digits).
3
size-adjust: Match fallback font metrics to web font to minimize layout shift.
Code Implementation Example
css
/* Preload in HTML <head>: */
/* <link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin> */
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-display: swap; /* Prevent FOIT */
font-weight: 100 900;
unicode-range: U+0000-00FF; /* Latin subset only */
}
/* Match fallback metrics to minimize layout shift */
@font-face {
font-family: 'Inter-fallback';
src: local('Arial');
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
}💡Font preloading, display swap, subsetting, and fallback metric matching.
🎯 Interview Key Takeaway
Use font-display: swap to prevent FOIT, preload critical fonts, and use size-adjust for seamless fallback matching.
#Fonts#Performance#FOUT#Senior
Back to all CSS & Modern Layouts Questions→