फ़ॉन्ट इस्तेमाल करने के सबसे सही तरीके

Core Web Vitals के लिए, वेब फ़ॉन्ट ऑप्टिमाइज़ करना.

Katie Hempenius
Katie Hempenius
Barry Pollard
Barry Pollard

इस दस्तावेज़ में, फ़ॉन्ट के लिए परफ़ॉर्मेंस से जुड़े सबसे सही तरीकों के बारे में बताया गया है. वेब फ़ॉन्ट, परफ़ॉर्मेंस पर कई तरह से असर डालते हैं:

इस दस्तावेज़ में तीन सेक्शन हैं: फ़ॉन्ट लोड करना, फ़ॉन्ट डिलीवर करना, और फ़ॉन्ट रेंडर करना. हर सेक्शन में बताया गया है कि फ़ॉन्ट लाइफ़साइकल का वह पहलू कैसे काम करता है. साथ ही, उससे जुड़े सबसे सही तरीके भी बताए गए हैं.

फ़ॉन्ट लोड करना

फ़ॉन्ट, अहम संसाधन होते हैं. इनके बिना, उपयोगकर्ता पेज का कॉन्टेंट नहीं देख पाएगा. इसलिए, फ़ॉन्ट लोड करने के सबसे सही तरीके आम तौर पर इस बात पर फ़ोकस करते हैं कि फ़ॉन्ट जल्द से जल्द लोड हो जाएं. तीसरे पक्ष की साइटों से लोड किए गए फ़ॉन्ट पर खास ध्यान देना चाहिए, क्योंकि इन फ़ॉन्ट फ़ाइलों को डाउनलोड करने के लिए, अलग-अलग कनेक्शन सेटअप की ज़रूरत होती है.

अगर आपको पक्का नहीं है कि आपके पेज के फ़ॉन्ट समय पर लोड हो रहे हैं या नहीं, तो ज़्यादा जानकारी के लिए Chrome DevTools में नेटवर्क पैनल में मौजूद टाइमिंग टैब देखें.

DevTools में टाइमिंग टैब.

@font-face के बारे में जानकारी

फ़ॉन्ट लोड करने के सबसे सही तरीकों के बारे में जानने से पहले, यह समझना ज़रूरी है कि @font-face कैसे काम करता है और इससे फ़ॉन्ट लोड करने पर क्या असर पड़ता है.

The @font-face डिक्लेरेशन, किसी भी वेब फ़ॉन्ट के साथ काम करने का एक अहम हिस्सा है. कम से कम, यह उस नाम का एलान करता है जिसका इस्तेमाल फ़ॉन्ट को रेफ़र करने के लिए किया जाता है. साथ ही, यह उससे जुड़ी फ़ॉन्ट फ़ाइल की जगह की जानकारी देता है.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

आम तौर पर, यह माना जाता है कि @font-face डिक्लेरेशन मिलने पर, फ़ॉन्ट का अनुरोध किया जाता है. हालांकि, यह गलत है. @font-face डिक्लेरेशन से, फ़ॉन्ट डाउनलोड नहीं होता. इसके बजाय, कोई फ़ॉन्ट सिर्फ़ तब डाउनलोड होता है, जब उसे पेज पर इस्तेमाल की गई स्टाइलिंग से रेफ़र किया जाता है. उदाहरण के लिए:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

इस उदाहरण में, Open Sans सिर्फ़ तब डाउनलोड होगा, जब पेज में <h1> एलिमेंट शामिल होगा.

इसलिए, फ़ॉन्ट ऑप्टिमाइज़ेशन के बारे में सोचते समय, स्टाइलशीट पर भी उतना ही ध्यान देना ज़रूरी है जितना कि फ़ॉन्ट फ़ाइलों पर. स्टाइलशीट के कॉन्टेंट या डिलीवरी में बदलाव करने से, फ़ॉन्ट लोड होने के समय पर काफ़ी असर पड़ सकता है. इसी तरह, इस्तेमाल नहीं किए गए सीएसएस को हटाने और स्टाइलशीट को अलग-अलग करने से, किसी पेज पर लोड होने वाले फ़ॉन्ट की संख्या कम की जा सकती है.

फ़ॉन्ट डिक्लेरेशन को इनलाइन करना

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

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

ज़रूरी सीएसएस को इनलाइन करना, एक बेहतर तकनीक हो सकती है. हालांकि, सभी साइटें इसे लागू नहीं कर सकतीं. इससे परफ़ॉर्मेंस में सुधार होता है. हालांकि, इसके लिए अतिरिक्त प्रोसेस और बिल्ड टूल की ज़रूरत होती है, ताकि यह पक्का किया जा सके कि ज़रूरी सीएसएस और बेहतर होगा कि सिर्फ़ ज़रूरी सीएसएस को सही तरीके से इनलाइन किया गया हो. साथ ही, यह भी पक्का किया जा सके कि कोई भी अतिरिक्त सीएसएस, रेंडरिंग को ब्लॉक करने वाले तरीके से डिलीवर न किया जाए.

ज़रूरी तीसरे पक्ष के ऑरिजिन से पहले से कनेक्ट करना

अगर आपकी साइट, तीसरे पक्ष की साइट से फ़ॉन्ट लोड करती है, तो हमारा सुझाव है कि आप preconnect रिसॉर्स हिंट का इस्तेमाल करके, तीसरे पक्ष के ऑरिजिन से पहले से कनेक्शन सेटअप करें. रिसॉर्स हिंट को दस्तावेज़ के <head> में रखा जाना चाहिए. यहां दिया गया रिसॉर्स हिंट, फ़ॉन्ट स्टाइलशीट लोड करने के लिए कनेक्शन सेटअप करता है.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

फ़ॉन्ट फ़ाइल डाउनलोड करने के लिए इस्तेमाल किए जाने वाले कनेक्शन को पहले से कनेक्ट करने के लिए, एक अलग preconnect रिसॉर्स हिंट जोड़ें. इसमें crossorigin एट्रिब्यूट का इस्तेमाल किया जाता है. स्टाइलशीट के उलट, फ़ॉन्ट फ़ाइलों को सीओआरएस कनेक्शन के ज़रिए भेजा जाना चाहिए.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

preconnect रिसॉर्स हिंट का इस्तेमाल करते समय, ध्यान रखें कि फ़ॉन्ट देने वाली कंपनी, अलग-अलग ऑरिजिन से स्टाइलशीट और फ़ॉन्ट डिलीवर कर सकती है. उदाहरण के लिए, Google Fonts के लिए preconnect रिसॉर्स हिंट का इस्तेमाल इस तरह किया जाएगा.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

फ़ॉन्ट लोड करने के लिए preload का इस्तेमाल करते समय सावधानी बरतें

हालांकि, preload की मदद से, पेज लोड होने की प्रोसेस में फ़ॉन्ट को जल्द से जल्द ढूंढना आसान हो जाता है. हालांकि, इससे ब्राउज़र के रिसॉर्स, अन्य रिसॉर्स को लोड करने के लिए इस्तेमाल नहीं किए जा पाते.

फ़ॉन्ट डिक्लेरेशन को इनलाइन करना और स्टाइलशीट में बदलाव करना, ज़्यादा असरदार तरीका हो सकता है. इन बदलावों से, देर से लोड होने वाले फ़ॉन्ट की समस्या को हल करने में मदद मिलती है. इसके लिए, सिर्फ़ कोई तरीका अपनाने के बजाय, समस्या की असली वजह को ठीक किया जाता है.

इसके अलावा, फ़ॉन्ट लोड करने की रणनीति के तौर पर preload का इस्तेमाल भी सावधानी से करना चाहिए, क्योंकि इससे ब्राउज़र की कुछ बिल्ट-इन कॉन्टेंट नेगोशिएशन रणनीतियां काम नहीं करती हैं. उदाहरण के लिए, preload, unicode-range डिक्लेरेशन को अनदेखा करता है. साथ ही, इसका इस्तेमाल सिर्फ़ एक फ़ॉन्ट फ़ॉर्मैट लोड करने के लिए किया जाना चाहिए.

हालांकि, बाहरी स्टाइलशीट का इस्तेमाल करते समय, सबसे ज़रूरी फ़ॉन्ट को प्रीलोड करना बहुत असरदार हो सकता है. ऐसा इसलिए, क्योंकि ब्राउज़र को यह पता नहीं चलेगा कि फ़ॉन्ट की ज़रूरत है या नहीं.

फ़ॉन्ट डिलीवर करना

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

सेल्फ़-होस्ट किए गए फ़ॉन्ट का इस्तेमाल करना

सैद्धांतिक तौर पर, सेल्फ़-होस्ट किए गए फ़ॉन्ट का इस्तेमाल करने से, परफ़ॉर्मेंस बेहतर होनी चाहिए, क्योंकि इससे तीसरे पक्ष के कनेक्शन सेटअप की ज़रूरत नहीं होती. हालांकि, असल में इन दोनों विकल्पों के बीच परफ़ॉर्मेंस में अंतर कम होता है. उदाहरण के लिए, Web Almanac में पाया गया कि तीसरे पक्ष के फ़ॉन्ट का इस्तेमाल करने वाली साइटों की रेंडरिंग, फ़ॉन्ट का इस्तेमाल करने वाली साइटों के मुकाबले ज़्यादा तेज़ी से हुई.

अगर सेल्फ़-होस्ट किए गए फ़ॉन्ट का इस्तेमाल करने की योजना है, तो पक्का करें कि आपकी साइट, कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) और एचटीटीपी/2 का इस्तेमाल करती हो. इन टेक्नोलॉजी का इस्तेमाल न करने पर, सेल्फ़-होस्ट किए गए फ़ॉन्ट से बेहतर परफ़ॉर्मेंस मिलने की संभावना कम होती है.

अगर सेल्फ़-होस्ट किए गए फ़ॉन्ट का इस्तेमाल किया जाता है, तो हमारा सुझाव है कि आप फ़ॉन्ट फ़ाइल ऑप्टिमाइज़ेशन के कुछ तरीके भी लागू करें. तीसरे पक्ष के फ़ॉन्ट देने वाली कंपनियां, आम तौर पर ये तरीके अपने-आप लागू करती हैं. उदाहरण के लिए, फ़ॉन्ट सबसेटिंग और WOFF2 कंप्रेशन. इन ऑप्टिमाइज़ेशन को लागू करने के लिए, आपकी साइट पर इस्तेमाल की जाने वाली भाषाओं के हिसाब से मेहनत करनी पड़ सकती है. खास तौर पर, ध्यान रखें कि सीजेके भाषाओं के लिए फ़ॉन्ट ऑप्टिमाइज़ करना मुश्किल हो सकता है.

WOFF2 का इस्तेमाल करना

मॉडर्न फ़ॉन्ट में, WOFF2 सबसे नया है. यह ज़्यादातर ब्राउज़र पर काम करता है और इसमें सबसे बेहतर कंप्रेशन मिलता है. WOFF2, Brotli का इस्तेमाल करता है. इसलिए, यह WOFF के मुकाबले 30% बेहतर तरीके से कंप्रेस होता है. इससे डाउनलोड करने के लिए कम डेटा की ज़रूरत होती है और परफ़ॉर्मेंस बेहतर होती है.

ब्राउज़र के साथ काम करने की सुविधा को देखते हुए, अब विशेषज्ञ सिर्फ़ WOFF2 का इस्तेमाल करने का सुझाव देते हैं:

असल में, हमारा मानना है कि अब यह एलान करने का समय आ गया है: सिर्फ़ WOFF2 का इस्तेमाल करें और बाकी सभी फ़ॉर्मैट को भूल जाएं.

इससे आपका सीएसएस और वर्कफ़्लो आसान हो जाएगा. साथ ही, गलती से दो बार या गलत फ़ॉन्ट डाउनलोड होने से भी बचा जा सकेगा. WOFF2 अब हर जगह काम करता है. इसलिए, अगर आपको बहुत पुराने ब्राउज़र के साथ काम करने की ज़रूरत नहीं है, तो सिर्फ़ WOFF2 का इस्तेमाल करें. अगर ऐसा नहीं किया जा सकता, तो उन पुराने ब्राउज़र के लिए कोई भी वेब फ़ॉन्ट डिलीवर न करें. अगर आपके पास फ़ॉलबैक की मज़बूत रणनीति है, तो इससे कोई समस्या नहीं होगी. पुराने ब्राउज़र पर आने वाले लोगों को, आपके फ़ॉलबैक फ़ॉन्ट दिखेंगे.

ब्रैम स्टीन, 2022 Web Almanac से

फ़ॉन्ट सबसेटिंग

फ़ॉन्ट फ़ाइलों में आम तौर पर, उन सभी अलग-अलग वर्णों के लिए बड़ी संख्या में ग्लिफ़ शामिल होते हैं जिनके साथ वे काम करते हैं. हालांकि, हो सकता है कि आपको अपने पेज पर सभी वर्णों की ज़रूरत न हो. ऐसे में, फ़ॉन्ट सबसेटिंग करके, फ़ॉन्ट फ़ाइलों का साइज़ कम किया जा सकता है.

unicode-range डिक्लेरेशन में मौजूद @font-face डिस्क्रिप्टर, ब्राउज़र को बताता है कि किसी फ़ॉन्ट का इस्तेमाल किन वर्णों के लिए किया जा सकता है.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

अगर पेज में यूनिकोड रेंज से मेल खाने वाला एक या उससे ज़्यादा वर्ण शामिल है, तो फ़ॉन्ट फ़ाइल डाउनलोड की जाती है. unicode-range का इस्तेमाल आम तौर पर, पेज के कॉन्टेंट में इस्तेमाल की गई भाषा के हिसाब से अलग-अलग फ़ॉन्ट फ़ाइलें डिलीवर करने के लिए किया जाता है.

unicode-range का इस्तेमाल अक्सर सबसेटिंग की तकनीक के साथ किया जाता है. सबसेट फ़ॉन्ट में, ओरिजनल फ़ॉन्ट फ़ाइल में मौजूद ग्लिफ़ का छोटा हिस्सा शामिल होता है. उदाहरण के लिए, सभी उपयोगकर्ताओं को सभी वर्ण डिलीवर करने के बजाय, कोई साइट लैटिन और सिरिलिक वर्णों के लिए अलग-अलग सबसेट फ़ॉन्ट जनरेट कर सकती है.

हर फ़ॉन्ट में ग्लिफ़ की संख्या अलग-अलग होती है:

  • लैटिन फ़ॉन्ट में आम तौर पर, हर फ़ॉन्ट के लिए 100 से 1,000 ग्लिफ़ होते हैं.
  • CJK फ़ॉन्ट में 10,000 से ज़्यादा वर्ण हो सकते हैं.

इस्तेमाल नहीं किए गए ग्लिफ़ को हटाने से, फ़ॉन्ट का फ़ाइल साइज़ काफ़ी कम किया जा सकता है.

फ़ॉन्ट देने वाली कुछ कंपनियां, अलग-अलग सबसेट के साथ फ़ॉन्ट फ़ाइलों के अलग-अलग वर्शन अपने-आप उपलब्ध करा सकती हैं. उदाहरण के लिए, Google Fonts डिफ़ॉल्ट रूप से ऐसा करता है:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

अगर फ़ॉन्ट देने वाली कंपनी इसकी अनुमति देती है, तो फ़ॉन्ट को मैन्युअल तरीके से सबसेट किया जा सकता है. इसके लिए, एपीआई (Google Fonts, text पैरामीटर उपलब्ध कराकर इसकी अनुमति देता है) का इस्तेमाल किया जा सकता है. इसके अलावा, फ़ॉन्ट फ़ाइलों को मैन्युअल तरीके से एडिट करके और फिर सेल्फ़-होस्टिंग करके भी ऐसा किया जा सकता है. फ़ॉन्ट सबसेट जनरेट करने के टूल में, subfont और glyphanger शामिल हैं.

फ़ॉन्ट लाइसेंस की जांच करके पक्का करें कि उनमें सबसेटिंग और सेल्फ़-होस्टिंग की अनुमति हो.

कम वेब फ़ॉन्ट का इस्तेमाल करना

सबसे तेज़ी से डिलीवर होने वाला फ़ॉन्ट वह होता है जिसका अनुरोध ही न किया गया हो. सिस्टम फ़ॉन्ट और वैरिएबल फ़ॉन्ट, आपकी साइट पर इस्तेमाल किए जाने वाले वेब फ़ॉन्ट की संख्या को कम करने के दो तरीके हैं.

सिस्टम फ़ॉन्ट, उपयोगकर्ता के डिवाइस के यूज़र इंटरफ़ेस (यूआई) में इस्तेमाल किया जाने वाला डिफ़ॉल्ट फ़ॉन्ट होता है. सिस्टम फ़ॉन्ट आम तौर पर, ऑपरेटिंग सिस्टम और वर्शन के हिसाब से अलग-अलग होते हैं. फ़ॉन्ट पहले से इंस्टॉल होता है, इसलिए इसे डाउनलोड करने की ज़रूरत नहीं होती. सिस्टम फ़ॉन्ट, मुख्य टेक्स्ट के लिए खास तौर पर काम के हो सकते हैं.

अपने सीएसएस में सिस्टम फ़ॉन्ट का इस्तेमाल करने के लिए, फ़ॉन्ट-फ़ैमिली के तौर पर system-ui को सूची में शामिल करें:

font-family: system-ui

वैरिएबल फ़ॉन्ट का मतलब है कि एक वैरिएबल फ़ॉन्ट को, कई फ़ॉन्ट फ़ाइलों के विकल्प के तौर पर इस्तेमाल किया जा सकता है. वैरिएबल फ़ॉन्ट, "डिफ़ॉल्ट" फ़ॉन्ट स्टाइल तय करके और फ़ॉन्ट में बदलाव करने के लिए "ऐक्सिस" उपलब्ध कराकर काम करते हैं. उदाहरण के लिए, Weight ऐक्सिस वाले वैरिएबल फ़ॉन्ट का इस्तेमाल, ऐसे लेटरिंग को लागू करने के लिए किया जा सकता है जिसके लिए पहले लाइट, रेगुलर, बोल्ड, और एक्स्ट्रा बोल्ड के लिए अलग-अलग फ़ॉन्ट की ज़रूरत होती थी.

वैरिएबल फ़ॉन्ट पर स्विच करने से सभी को फ़ायदा नहीं मिलता. वैरिएबल फ़ॉन्ट में कई स्टाइल शामिल होती हैं. इसलिए, आम तौर पर इनका फ़ाइल साइज़, उन नॉन-वैरिएबल फ़ॉन्ट के मुकाबले बड़ा होता है जिनमें सिर्फ़ एक स्टाइल होती है. वैरिएबल फ़ॉन्ट का इस्तेमाल करने से, उन साइटों को सबसे ज़्यादा फ़ायदा मिलेगा जो अलग-अलग फ़ॉन्ट स्टाइल और वेट का इस्तेमाल करती हैं (और जिन्हें इनकी ज़रूरत होती है).

फ़ॉन्ट रेंडर करना

जब ब्राउज़र को कोई ऐसा वेब फ़ॉन्ट मिलता है जो अब तक लोड नहीं हुआ है, तो उसके सामने यह दुविधा होती है कि क्या उसे वेब फ़ॉन्ट लोड होने तक टेक्स्ट रेंडर नहीं करना चाहिए? या क्या उसे वेब फ़ॉन्ट लोड होने तक, फ़ॉलबैक फ़ॉन्ट में टेक्स्ट रेंडर करना चाहिए?

अलग-अलग ब्राउज़र, इस स्थिति को अलग-अलग तरीके से हैंडल करते हैं. डिफ़ॉल्ट रूप से, Chromium पर आधारित और Firefox ब्राउज़र, टेक्स्ट रेंडरिंग को तीन सेकंड तक ब्लॉक करते हैं. ऐसा तब होता है, जब उनसे जुड़ा वेब फ़ॉन्ट लोड नहीं होता. Safari, टेक्स्ट रेंडरिंग को हमेशा के लिए ब्लॉक करता है.

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

font-display की कोई सही रणनीति चुनना

font-display , ब्राउज़र को बताता है कि उससे जुड़ा वेब फ़ॉन्ट लोड न होने पर, उसे टेक्स्ट रेंडरिंग कैसे करनी चाहिए. इसे हर फ़ॉन्ट-फ़ेस के लिए तय किया जाता है.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display के लिए पांच वैल्यू हो सकती हैं:

वैल्यू ब्लॉक पीरियड स्वैप पीरियड
ऑटो ब्राउज़र के हिसाब से अलग-अलग ब्राउज़र के हिसाब से अलग-अलग
ब्लॉक 2-3 सेकंड इनफ़ाइनाइट
स्वैप 0 मि.से. इनफ़ाइनाइट
फ़ॉलबैक 100 मि.से. 3 सेकंड
ऑप्शनल 100 मि.से. कोई नहीं
  • ब्लॉक पीरियड: ब्लॉक पीरियड तब शुरू होता है, जब ब्राउज़र किसी वेब फ़ॉन्ट का अनुरोध करता है. ब्लॉक पीरियड के दौरान, अगर वेब फ़ॉन्ट उपलब्ध नहीं है, तो फ़ॉन्ट को इनविज़िबल फ़ॉलबैक फ़ॉन्ट में रेंडर किया जाता है. इसलिए, उपयोगकर्ता को टेक्स्ट नहीं दिखता. अगर ब्लॉक पीरियड के खत्म होने पर फ़ॉन्ट उपलब्ध नहीं है, तो उसे फ़ॉलबैक फ़ॉन्ट में रेंडर किया जाता है.
  • स्वैप पीरियड: स्वैप पीरियड, ब्लॉक पीरियड के बाद आता है. अगर स्वैप पीरियड के दौरान वेब फ़ॉन्ट उपलब्ध हो जाता है, तो उसे "स्वैप" किया जाता है.

font-display की रणनीतियां, परफ़ॉर्मेंस और डिज़ाइन के बीच होने वाले ट्रेडऑफ़ के बारे में अलग-अलग नज़रिए दिखाती हैं. इसलिए, किसी एक तरीके का सुझाव देना मुश्किल है, क्योंकि यह लोगों की प्राथमिकताओं, पेज और ब्रैंड के लिए वेब फ़ॉन्ट कितना ज़रूरी है, और देर से लोड होने वाले फ़ॉन्ट को स्वैप करने पर, वह कितना अलग दिखता है, इस पर निर्भर करता है.

ज़्यादातर साइटों के लिए, आपकी सबसे बड़ी प्राथमिकता के आधार पर, ये तीन रणनीतियां सबसे सही हैं:

  • परफ़ॉर्मेंस: font-display: optional का इस्तेमाल करें. यह सबसे "परफ़ॉर्मेंट" तरीका है: टेक्स्ट रेंडर होने में 100 मि.से. से ज़्यादा की देरी नहीं होती. साथ ही, यह पक्का होता है कि फ़ॉन्ट-स्वैप से जुड़े लेआउट शिफ़्ट नहीं होंगे. हालांकि, अगर वेब फ़ॉन्ट देर से लोड होता है, तो उसका इस्तेमाल नहीं किया जाएगा.

  • टेक्स्ट को तुरंत दिखाएं और वेब-फ़ॉन्ट का इस्तेमाल भी करें: font-display: swap हालांकि, यह पक्का करें कि फ़ॉन्ट जल्द से जल्द डिलीवर हो जाए, ताकि इससे लेआउट शिफ़्ट न हो. इस विकल्प का नुकसान यह है कि फ़ॉन्ट देर से लोड होने पर, वह अचानक से दिखता है.

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

यह भी ध्यान रखें कि इन दोनों तरीकों को एक साथ इस्तेमाल किया जा सकता है. उदाहरण के लिए, ब्रैंडिंग और अन्य दिखने वाले पेज एलिमेंट के लिए font-display: swap का इस्तेमाल करें. मुख्य टेक्स्ट में इस्तेमाल किए गए फ़ॉन्ट के लिए font-display: optional का इस्तेमाल करें.

आइकॉन फ़ॉन्ट

font-display की वे रणनीतियां जो सामान्य वेब फ़ॉन्ट के लिए सही काम करती हैं, आइकॉन फ़ॉन्ट के लिए उतनी सही काम नहीं करतीं. आइकॉन फ़ॉन्ट का फ़ॉलबैक फ़ॉन्ट, आम तौर पर आइकॉन फ़ॉन्ट से काफ़ी अलग दिखता है. साथ ही, इसके वर्णों का मतलब भी अलग हो सकता है. इसलिए, आइकॉन फ़ॉन्ट से लेआउट शिफ़्ट होने की संभावना ज़्यादा होती है.

इसके अलावा, फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करना सही नहीं हो सकता. अगर मुमकिन हो, तो आइकॉन फ़ॉन्ट को एसवीजी से बदलें. यह ऐक्सेस करने की सुविधा के लिए भी बेहतर है. आइकॉन फ़ॉन्ट के नए वर्शन में आम तौर पर, एसवीजी काम करते हैं. एसवीजी पर स्विच करने के बारे में ज़्यादा जानकारी के लिए, SVG Sprites पर Font Awesome का पेज और हमारी Material Icons गाइड देखें.

फ़ॉलबैक फ़ॉन्ट और वेबफ़ॉन्ट के बीच शिफ़्ट को कम करना

सीएलएस के असर को कम करने के लिए, आप size-adjust एट्रिब्यूट का इस्तेमाल कर सकते हैं.

नतीजा

वेब फ़ॉन्ट अब भी परफ़ॉर्मेंस के लिए एक बॉटलनेक बने हुए हैं. हालांकि, हमारे पास इन्हें ऑप्टिमाइज़ करने के लिए, विकल्पों की संख्या लगातार बढ़ रही है. इससे इस बॉटलनेक को कम से कम किया जा सकता है.