Discuss custom web font performance and loading strategies

WHAT THIS TESTS: This question tests whether you understand the critical rendering path and can reason about the tension between visual design and perceived performance. Interviewers want to see that you know custom fonts block rendering, increase payload, and cause layout instability if handled naively. At the senior level, they expect tradeoff analysis, not just reciting CSS properties.

A GOOD ANSWER COVERS: A strong response starts by naming the failure modes: FOIT where text stays invisible while the font loads, and FOUT where a fallback appears first then swaps. Next, it maps font-display strategies to user experience goals. Swap is best when readability matters more than exact layout, because it shows fallback text immediately then swaps. Optional is useful for stable layouts when the custom font is decorative. Block should generally be avoided. Then, discuss preloading: only preload the specific weight and unicode-range needed for above-the-fold content, because over-preloading steals bandwidth from render-critical resources. Mention subsetting to remove unused glyphs and compression via WOFF2. Finally, address layout stability. Mention the size-adjust descriptor, ascent-override, or fallback font calibration so the swap does not trigger large cumulative layout shift. If you know the numbers, note that a single Latin font file can drop from 200 kilobytes to under 30 kilobytes with aggressive subsetting.

COMMON WRONG ANSWERS: The biggest red flag is treating font-display swap as a magic fix. Swap eliminates FOIT but guarantees FOUT, which causes layout shift if metrics differ between fallback and custom fonts. Another red flag is preloading every weight and style in the family; this hurts time to first byte and can delay more important resources. Saying subsetting is only for CJK fonts is also wrong, Latin sets still contain hundreds of unused glyphs.

LIKELY FOLLOW-UPS: An interviewer might ask how you would measure the impact, so be ready to mention web font loading APIs, Lighthouse scores for CLS, or setting performance budgets in CI. They might also ask about variable fonts as an alternative to multiple static files, or how to handle third-party font services that do not support fine-grained control.

ONE CONCRETE EXAMPLE: Imagine a marketing landing page using a 700-weight display font for the headline and 400-weight body text. The right strategy is to preload only the 700 headline font with a narrow unicode-range for the hero text, use font-display optional for the body font so it either loads instantly or stays in fallback, subset both files to Latin characters only, and declare a size-adjust fallback font to keep the headline from jumping when the swap occurs.