इस पेज का अनुवाद 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>

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

<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 के एलान को अनदेखा कर देता है. अगर इसे सही तरीके से इस्तेमाल किया जाए, तो इसका इस्तेमाल सिर्फ़ एक फ़ॉन्ट फ़ॉर्मैट को लोड करने के लिए करें.

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

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

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

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

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

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

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

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

WOFF2 का उपयोग करें

आधुनिक फ़ॉन्ट फ़ॉन्ट में से, WOFF2 सबसे नया है. यह ब्राउज़र के लिए सबसे चौड़ा है और सबसे अच्छा कंप्रेशन देता है. यह Brotli का इस्तेमाल करने की वजह से, 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 से 1000 ग्लिफ़ प्रति फ़ॉन्ट में होते हैं; 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 मिलीसेकंड	इनफ़ाइनाइट
फ़ॉलबैक	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 पर स्विच करने के बारे में ज़्यादा जानकारी के लिए, फ़ॉन्ट Awesome और मटीरियल आइकॉन देखें.

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

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

नतीजा

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