Performance: Font weight control
MEDIUM IMPACT
Font weight control affects text rendering speed and page load by influencing font file size and browser paint time.
0
0
Font weight control in Tailwind - Performance & Optimization
Applying multiple font weights unnecessarily
Tailwind
<p class="font-bold">Text</p>Using a single font weight reduces font file size and speeds up text rendering.
📈 Performance Gainsaves 50-150kb, faster LCP by reducing font load blocking
Applying multiple font weights unnecessarily
Tailwind
<p class="font-thin font-bold font-extrabold">Text</p>Loading multiple font weights increases font file size and delays text rendering.
📉 Performance Costadds 50-150kb to font bundle, blocks rendering until fonts load
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Multiple font weights loaded | No extra DOM nodes | 0 | High paint cost due to font load delay | [X] Bad |
| Single font weight used | No extra DOM nodes | 0 | Lower paint cost, faster text rendering | [OK] Good |
Rendering Pipeline
Font weight control affects the browser's font loading and text painting stages, impacting how quickly text appears.
→Font Loading
→Paint
→Composite
⚠️ BottleneckFont Loading delays paint and composite stages causing slower text display.
Core Web Vital Affected
LCP
Font weight control affects text rendering speed and page load by influencing font file size and browser paint time.
Optimization Tips
1Limit font weights to only those used on the page.
2Preload critical font weights to reduce blocking.
3Use font-display: swap to avoid invisible text during font load.
Performance Quiz - 3 Questions
Test your performance knowledge
How does using many font weights affect page load?
DevTools: Performance
How to check: Record a page load, then filter for 'Font' events and check font load times and blocking.
What to look for: Long font load times or blocking periods before text paint indicate font weight overuse.