Font weight in CSS - Performance & Optimization

Performance: Font weight

MEDIUM IMPACT

Font weight affects how text is painted and can influence rendering speed and layout stability.

Applying font weight styles for text emphasis

CSS

body { font-weight: 400; }
h1 { font-weight: 700; }
p { font-weight: 400; }

Using fewer font weights reduces font file size and minimizes layout shifts.

📈 Performance Gainsaves 100-300kb in font files, reduces CLS

Applying font weight styles for text emphasis

CSS

body { font-weight: 100; }
h1 { font-weight: 900; }
p { font-weight: 700; }

Loading multiple font weights increases font file size and can cause layout shifts when fonts load asynchronously.

📉 Performance Costadds 100-300kb to font files, triggers layout shifts causing CLS

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Many font weights	No extra DOM nodes	Multiple reflows on font load	High paint cost due to font rendering	[X] Bad
Few font weights	No extra DOM nodes	Single reflow on font load	Lower paint cost	[OK] Good

Rendering Pipeline

Font weight affects style calculation and paint stages. Multiple weights increase font file size, delaying font loading and causing layout shifts.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout due to font loading causing reflows and CLS

Core Web Vital Affected

CLS

Font weight affects how text is painted and can influence rendering speed and layout stability.

Optimization Tips

1Limit the number of font weights to reduce font file size.

2Preload critical font weights to avoid layout shifts.

3Avoid switching font weights dynamically after page load.

Performance Quiz - 3 Questions

How does using many different font weights affect page performance?

A Reduces font file size and speeds up rendering

B Increases font file size and causes layout shifts

C Has no impact on performance

D Improves text input responsiveness

DevTools: Performance

How to check: Record a page load and look for layout shifts and font loading times in the flame chart.

What to look for: Look for layout shift events and long font load durations indicating multiple font weights.