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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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