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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इससे आपकी सीएसएस और वर्कफ़्लो को आसानी से मैनेज किया जा सकेगा. साथ ही, अनजाने में फ़ॉन्ट दो बार या गलत तरीके से डाउनलोड होने से भी बचा जा सकेगा. WOFF2 का इस्तेमाल अब सभी जगह किया जा सकता है. इसलिए, अगर आपको बहुत पुराने ब्राउज़र के साथ काम करना है, तो सिर्फ़ WOFF2 का इस्तेमाल करें. अगर ऐसा नहीं किया जा सकता, तो उन पुराने ब्राउज़र पर कोई वेब फ़ॉन्ट न दिखाएं. अगर आपके पास फ़ॉलबैक की कोई अच्छी रणनीति है, तो इससे कोई समस्या नहीं होगी. पुराने ब्राउज़र का इस्तेमाल करने वाले लोगों को आपके फ़ॉलबैक फ़ॉन्ट दिखेंगे.
Bram Stein, from the 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 पैरामीटर उपलब्ध कराकर इसकी सुविधा देता है) का इस्तेमाल किया जा सकता है. इसके अलावा, फ़ॉन्ट फ़ाइलों में मैन्युअल तरीके से बदलाव करके, उन्हें खुद होस्ट किया जा सकता है. फ़ॉन्ट के सबसेट जनरेट करने के लिए, subfont और glyphanger जैसे टूल इस्तेमाल किए जा सकते हैं.

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

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

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

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

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

font-family: system-ui

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

मुख्य शब्द: हम अक्सर "Times New Roman" और "Helvetica" को फ़ॉन्ट के तौर पर देखते हैं. तकनीकी तौर पर, ये फ़ॉन्ट फ़ैमिली हैं. फ़ॉन्ट फ़ैमिली में कई स्टाइल होते हैं. ये स्टाइल, टाइपफ़ेस के अलग-अलग वैरिएशन होते हैं. जैसे, लाइट, मीडियम या बोल्ड इटैलिक. फ़ॉन्ट फ़ाइल में एक ही स्टाइल होती है. हालांकि, अगर यह वैरिएबल फ़ॉन्ट है, तो इसमें एक से ज़्यादा स्टाइल हो सकती हैं. टाइपफ़ेस, बुनियादी डिज़ाइन होता है. इसे डिजिटल फ़ॉन्ट के तौर पर दिखाया जा सकता है. साथ ही, इसे नक्काशी वाले लकड़ी के ब्लॉक या धातु जैसे फ़िज़िकल टाइप में भी दिखाया जा सकता है.

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

फ़ॉन्ट रेंडरिंग

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

अलग-अलग ब्राउज़र, इस स्थिति को अलग-अलग तरीके से हैंडल करते हैं. डिफ़ॉल्ट रूप से, 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 के लिए पांच वैल्यू हो सकती हैं:

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

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

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

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

नतीजा

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