# Font optimization — Web Performance Optimization

Source: https://www.geekswithgeeks.com/en/web-performance/web-perf-14

> Load and render fonts efficiently to minimize impact on performance and FOUT/FOIT.

## Font loading strategies

Use `font-display: swap` to show fallback instantly, swap when font loads. Preload critical fonts: `<link rel=preload as=font href=font.woff2 type=font/woff2 crossorigin>`. Avoid FOUT (Flash of Unstyled Text).

## Font subsetting and variable fonts

Subset fonts to only needed characters (e.g., latin). Variable fonts combine multiple weights in one file. Reduce from 100KB to 30KB. Tools: google-webfonts-helper, FontTools.

## Font delivery best practices

Use system fonts as primary fallback. Limit fonts to 2 per page, 2 weights each. Use WOFF2 format. Monitor impact on LCP. Fonts often contribute 100-200ms to load time.

Quick check

**Quiz:** What does font-display: swap do?

- [ ] Shows fallback text immediately, swaps font when loaded
- [ ] Hides text until font loads
- [ ] Disables font loading