इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली सुविधा के लिए, वेब फ़ॉन्ट ऑप्टिमाइज़ करें.

Katie Hempenius

Barry Pollard

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

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

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

फ़ॉन्ट लोड हो रहा है

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

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

DevTools में समय टैब का स्क्रीनशॉट

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

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

@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>

ध्यान दें: Google Fonts में, <link> टैग या @import स्टेटमेंट से फ़ॉन्ट लोड करने का विकल्प मिलता है. <link> कोड स्निपेट में preconnect संसाधन संकेत शामिल होता है. इसलिए, @import वर्शन इस्तेमाल करने के मुकाबले, इससे ज़्यादा तेज़ी से स्टाइलशीट डिलीवर की जा सकती है. इन <link> टैग को दस्तावेज़ में जल्द से जल्द डाला जाना चाहिए.

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

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

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

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

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

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

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

खुद से होस्ट किए जाने वाले फ़ॉन्ट इस्तेमाल करना

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

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

ध्यान दें: अगर आपको यह तय करने में मुश्किल हो रही है कि खुद से होस्ट किए गए फ़ॉन्ट इस्तेमाल करने से बेहतर परफ़ॉर्मेंस मिलेगी या नहीं, तो अपने सर्वर से फ़ॉन्ट फ़ाइल को चलाकर देखें. साथ ही, ट्रांसफ़र करने में लगने वाले समय (कनेक्शन सेट अप सहित) की तुलना तीसरे पक्ष के फ़ॉन्ट से करें. अगर आपके सर्वर धीमे हैं, तो सीडीएन का इस्तेमाल न करें या एचटीटीपी/2 का इस्तेमाल न करें. ऐसा करने से, खुद होस्ट किए गए फ़ॉन्ट के बेहतर परफ़ॉर्म करने की संभावना कम हो जाती है.

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

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

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

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

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

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

सबटाइटल फ़ॉन्ट

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

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

@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 पैरामीटर देकर इसका इस्तेमाल किया जा सकता है) या फ़ॉन्ट फ़ाइलों में मैन्युअल तरीके से बदलाव करके खुद होस्ट करके, ऐसा किया जा सकता है. फ़ॉन्ट के सबसेट जनरेट करने के टूल में, सबफ़ॉन्ट और ग्लिफ़ेंजर शामिल हैं. हालांकि, उन फ़ॉन्ट के लाइसेंस की जांच ज़रूर कर लें जिनका इस्तेमाल आपने सब-होस्टिंग के लिए और खुद होस्ट करने के लिए किया है.

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

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

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

अपनी सीएसएस में सिस्टम फ़ॉन्ट का इस्तेमाल करने के लिए, 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 मिलीसेकंड	इनफ़ाइनाइट
Fallback	100 मि.से.	3 सेकंड
ज़रूरी नहीं	100 मि.से.	कभी नहीं

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

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

ज़्यादातर साइटों के लिए, ये तीन रणनीतियां सबसे ज़्यादा लागू होंगी:

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

ध्यान दें: font-display: auto, font-display: block, font-display: swap, और font-display: fallback सभी फ़ॉन्ट की जगह बदलने पर, लेआउट शिफ़्ट हो सकते हैं. हालांकि, इन तरीकों में से font-display: swap, टेक्स्ट रेंडर करने में सबसे कम देरी करेगा. इसलिए, यह ऐसी स्थितियों के लिए पसंदीदा तरीका हो सकता है जब यह ज़रूरी हो कि टेक्स्ट को जल्द से जल्द दिखाया जाए, लेकिन आखिर में उसे वेब फ़ॉन्ट के तौर पर रेंडर किया जाए.

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

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

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

सीएलएस के असर को कम करने के लिए, size-adjust के नए एट्रिब्यूट का इस्तेमाल किया जा सकता है. ज़्यादा जानकारी के लिए, सीएसएस के बारे में यह लेख size-adjust पढ़ें. यह हमारे टूलसेट में एक नया बदलाव है, इसलिए मौजूदा समय में यह ज़्यादा बेहतर और थोड़ा मैन्युअल है. आपके साथ एक्सपेरिमेंट करना और आने वाले समय में टूल को बेहतर बनाने के लिए, इसे देखना नामुमकिन हो गया है!

नतीजा

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