0
0
Astroframework~8 mins

Font optimization in Astro - Performance & Optimization

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Performance: Font optimization
HIGH IMPACT
Font optimization affects page load speed and visual stability by controlling how fonts are loaded and rendered.
Loading custom web fonts efficiently in an Astro project
Astro
---
// Preload key font in head
const preloadFont = () => {
  return `<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous" />`;
};
---
<head>
  {Astro.raw(preloadFont())}
  <style>
    @font-face {
      font-family: 'MyFont';
      src: url('/fonts/myfont.woff2') format('woff2');
      font-display: swap;
      font-weight: 400;
      font-style: normal;
    }
  </style>
</head>
Preloads only needed font, uses font-display swap to avoid blocking text rendering, reducing LCP and CLS.
📈 Performance GainReduces blocking time by 200ms+, eliminates layout shifts from late font swaps
Loading custom web fonts efficiently in an Astro project
Astro
import './styles.css';
/* styles.css includes @font-face with multiple font weights and styles, no preload or font-display set */
Loads all font variants at once, blocks text rendering until fonts load, causing slow LCP and layout shifts.
📉 Performance CostBlocks rendering for 200-400ms, triggers CLS due to late font swap
Performance Comparison
PatternDOM OperationsReflowsPaint CostVerdict
Load all fonts without preload or font-displayMinimalMultiple reflows due to late font swapHigh paint cost from layout shifts[X] Bad
Preload key fonts and use font-display: swapMinimalSingle reflow or noneLow paint cost with stable layout[OK] Good
Rendering Pipeline
Fonts are requested during HTML parsing. Without optimization, font loading blocks text rendering causing layout shifts. Preloading fonts moves font requests earlier, and font-display swap allows fallback text rendering until fonts load.
→Critical Rendering Path
→Layout
→Paint
⚠️ BottleneckCritical Rendering Path blocking due to font loading
Core Web Vital Affected
LCP, CLS
Font optimization affects page load speed and visual stability by controlling how fonts are loaded and rendered.
Optimization Tips
1Always preload key font files to start loading them early.
2Use font-display: swap to avoid blocking text rendering.
3Limit font weights and styles to only those needed to reduce file size.
Performance Quiz - 3 Questions
Test your performance knowledge
What is the main benefit of using font-display: swap in web fonts?
AIt blocks text rendering until the font fully loads.
BIt allows text to be visible immediately using fallback fonts while the custom font loads.
CIt reduces the font file size automatically.
DIt preloads the font before HTML parsing.
DevTools: Performance
How to check: Record a page load, then look for 'Layout Shift' events and font loading times in the waterfall. Also check the 'Largest Contentful Paint' timing.
What to look for: Short font load times, minimal or no layout shifts, and fast LCP indicate good font optimization.