# फ़ॉन्ट अनुकूलन — वेब प्रदर्शन अनुकूलन

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

> FOUT/FOIT पर प्रभाव को कम करने के लिए कुशलतापूर्वक फ़ॉन्ट लोड और रेंडर करें।

## फ़ॉन्ट लोडिंग रणनीतियां

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).

## फ़ॉन्ट सबसेटिंग और परिवर्तनशील फ़ॉन्ट

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.

## फ़ॉन्ट वितरण सर्वोत्तम प्रथाएं

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.

त्वरित जाँच

**Quiz:** font-display: swap क्या करता है?

- [ ] तुरंत फ़ॉलबैक टेक्स्ट दिखाता है, लोड होने पर फ़ॉन्ट बदलता है
- [ ] फ़ॉन्ट लोड होने तक टेक्स्ट छुपाता है
- [ ] फ़ॉन्ट लोडिंग को अक्षम करता है