पक्का करें कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे

फ़ॉन्ट अक्सर बड़ी फ़ाइलें होती हैं और इन्हें लोड होने में ज़्यादा समय लगता है. कुछ ब्राउज़र, फ़ॉन्ट लोड होने तक टेक्स्ट को छिपा देते हैं. इससे अनदेखे जा सकने वाले टेक्स्ट का फ़्लैश (FOIT) होता है.

Lighthouse का फ़ॉन्ट-डिसप्ले ऑडिट कैसे पूरा नहीं हो पाता

Lighthouse ऐसे सभी फ़ॉन्ट यूआरएल को फ़्लैग करता है जिनसे अदृश्य टेक्स्ट फ़्लैश हो सकता है:

लाइटहाउस का स्क्रीनशॉट, जिसमें यह पक्का किया गया है कि वेबफ़ॉन्ट लोड होने के दौरान टेक्स्ट दिखता रहे

न दिखने वाले टेक्स्ट को दिखाने से रोकने का तरीका

font-display एपीआई से पता चलता है कि font-face स्टाइल में इस्तेमाल करने पर, फ़ॉन्ट कैसा दिखता है. अगर कस्टम फ़ॉन्ट तैयार नहीं है, तो नीचे दी गई font-display वैल्यू, ब्राउज़र को सिस्टम फ़ॉन्ट का इस्तेमाल करने के लिए कहेंगी:

  • swap
  • optional
  • fallback

सीएसएस का उदाहरण

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Google Fonts का उदाहरण

Google Fonts के यूआरएल के आखिर में &display=swap/&display=optional/&display=fallback पैरामीटर जोड़ें:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

देर से लोड होने वाले फ़ॉन्ट की वजह से लेआउट में होने वाले बदलावों से बचने का तरीका

कुछ समय के लिए सिस्टम फ़ॉन्ट दिखाने पर, फ़ॉन्ट के बिना स्टाइल वाले टेक्स्ट (FOUT) के फ़्लैश से फ़ॉन्ट के बिना स्टाइल वाले टेक्स्ट (FOIT) की जगह ले लेगा. इससे कॉन्टेंट जल्दी रेंडर होता है और FCP और LCP बेहतर होते हैं. हालांकि, जब कस्टम फ़ॉन्ट, अस्थायी सिस्टम फ़ॉन्ट की जगह लेता है, तो FOIT और FOUT, दोनों का सीएलएस पर एक जैसा असर पड़ेगा.

font-display: optional के साथ प्रीलोड का इस्तेमाल करके, फ़ॉन्ट लोड होने से सीएलएस पर पड़ने वाले असर को कम किया जा सकता है. हालांकि, प्रीलोड का ज़रूरत से ज़्यादा इस्तेमाल करने से, लोड मेट्रिक पर बुरा असर पड़ सकता है. हमारा सुझाव है कि आप A/B टेस्टिंग करें, ताकि यह पक्का किया जा सके कि फ़ॉन्ट को पहले से लोड करने से, परफ़ॉर्मेंस में कोई गिरावट न आए.

स्टैक के हिसाब से दिशा-निर्देश

Drupal

अपनी थीम में पसंद के मुताबिक फ़ॉन्ट की जानकारी देने के दौरान, @font-display के बारे में बताएं.

Magento

पसंद के मुताबिक फ़ॉन्ट बनाते समय, @font-display तय करें.

संसाधन