Custom font integration in Tailwind - Performance & Optimization

Performance: Custom font integration

MEDIUM IMPACT

This affects page load speed and visual stability by controlling how fonts load and render on the page.

Adding a custom font to a Tailwind CSS project

Tailwind

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); font-display: swap; }

font-display: swap shows fallback text immediately and swaps in the custom font when ready, reducing invisible text and layout shifts.

📈 Performance GainImproves LCP and reduces CLS by avoiding invisible text and layout shifts.

Adding a custom font to a Tailwind CSS project

Tailwind

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'); font-display: auto; }

Using font-display: auto delays text rendering until the font loads, causing invisible text and layout shifts.

📉 Performance CostBlocks text rendering, increasing LCP and causing CLS due to layout shifts.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
font-display: auto	Minimal	Multiple reflows on font swap	High paint cost due to invisible text and repaint	[X] Bad
font-display: swap	Minimal	Single reflow on font swap	Lower paint cost with immediate fallback text	[OK] Good

Rendering Pipeline

The browser downloads the font file during the critical rendering path. font-display controls when text is painted with fallback or custom fonts, affecting layout stability and paint timing.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckPaint stage is most expensive due to delayed text rendering and repaints when font swaps.

Core Web Vital Affected

LCP

This affects page load speed and visual stability by controlling how fonts load and render on the page.

Optimization Tips

1Use font-display: swap to avoid invisible text and reduce layout shifts.

2Preload custom fonts to start downloading early and improve LCP.

3Avoid font-display: auto as it delays text rendering and causes CLS.

Performance Quiz - 3 Questions

Which font-display value helps reduce invisible text during font loading?

A swap

B auto

C block

D fallback

DevTools: Performance

How to check: Record a page load and look for 'Layout Shift' events and 'Text Paint' timings in the flame chart.

What to look for: Check if text is invisible initially and if layout shifts occur when fonts load, indicating poor font-display usage.