Blocking web fonts

Problem Summary

Blocking web fonts delay text rendering when the browser waits for font files before showing readable content.

Performance Impact

• Delayed FCP: Text may stay invisible while fonts load
• Layout shifts: Fallback and final fonts can have different metrics
• Extra requests: Multiple weights and styles increase the waterfall
• Third-party dependency: Remote font services add DNS, TLS, and request cost

How to Detect

1. Network tab: Inspect font request timing and file count
2. PageSpeed Insights: Check render-blocking resources and layout shifts
3. Coverage: Confirm which font weights are actually used

Solutions

1. Use font-display

@font-face { font-family: "Brand"; src: url("/fonts/brand.woff2") format("woff2"); font-display: swap; }

2. Limit Weights and Styles

Load only the font files used by the design.

3. Self-Host Critical Fonts

Serving fonts from your own domain can reduce connection overhead.

4. Match Fallback Metrics

Choose fallback fonts that reduce layout shift before the custom font loads.