पाठ 14 / 25

फ़ॉन्ट अनुकूलन

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.

त्वरित जाँच

त्वरित जाँच: font-display: swap क्या करता है?

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