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

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

Fallback font तुरंत दिखाने और font load होने पर बदलने के लिए font-display: swap इस्तेमाल करें। Critical fonts preload करें: <link rel=preload as=font href=font.woff2 type=font/woff2 crossorigin>। FOUT (Flash of Unstyled Text) से बचें।

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

Fonts को सिर्फ़ ज़रूरी characters (जैसे latin) तक subset करें। Variable fonts कई weights को एक file में जोड़ते हैं। 100KB से घटकर 30KB तक। Tools: google-webfonts-helper, FontTools।

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

System fonts को primary fallback बनाएँ। Page पर fonts 2 तक और हर एक के 2 weights तक रखें। WOFF2 format इस्तेमाल करें। LCP पर असर monitor करें। Fonts अक्सर load time में 100-200ms जोड़ते हैं।

त्वरित जाँच

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

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