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

Ilya Grigorik

Jeremy Wagner

अच्छे डिज़ाइन, ब्रैंडिंग, पढ़ने में आसान, और सुलभता के लिए टाइपोग्राफ़ी ज़रूरी है. वेब फ़ॉन्ट ऊपर दी गई सभी सुविधाओं के साथ-साथ और भी सुविधाएं देते हैं: टेक्स्ट चुनने लायक, खोजने लायक, और ज़ूम करने लायक होता है. साथ ही, यह हाई-डीपीआई के साथ काम करता है. यह स्क्रीन के साइज़ और रिज़ॉल्यूशन पर ध्यान दिए बिना, एक जैसा और साफ़ टेक्स्ट रेंडरिंग की सुविधा देता है. अच्छे डिज़ाइन, उपयोगकर्ता अनुभव, और परफ़ॉर्मेंस के लिए WebFont बहुत ज़रूरी हैं.

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

वेब फ़ॉन्ट की बनावट

वेब फ़ॉन्ट, ग्लिफ़ का एक कलेक्शन होता है. हर ग्लिफ़ एक वेक्टर का आकार होता है, जो किसी अक्षर या सिंबल के बारे में बताता है. इस वजह से, दो आसान वैरिएबल किसी खास फ़ॉन्ट फ़ाइल का साइज़ तय करते हैं: हर ग्लिफ़ के वेक्टर पाथ की जटिलता और किसी खास फ़ॉन्ट में ग्लिफ़ की संख्या. उदाहरण के लिए, Open Sans, जो सबसे लोकप्रिय WebFont में से एक है. इसमें 897 ग्लिफ़ हैं. इनमें लैटिन, ग्रीक, और सिरिलिक वर्ण भी शामिल हैं.

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

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

वेब फ़ॉन्ट फ़ॉर्मैट

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

• EOT
• TTF
• बंद करना
• WOFF2.

WOFF और WOFF 2.0 विस्तृत समर्थन का आनंद लेते हैं और सभी आधुनिक ब्राउज़र द्वारा समर्थित हैं.

• मॉडर्न ब्राउज़र पर WOFF 2.0 वैरिएंट इस्तेमाल करें.
• अगर बहुत ज़रूरी हो—उदाहरण के लिए, अगर आपको अब भी Internet Explorer 11 पर काम करने की ज़रूरत है, तो WOFF को फ़ॉलबैक के रूप में दिखाएं.
• इसके अलावा, पुराने ब्राउज़र के लिए वेब फ़ॉन्ट का इस्तेमाल न करें और सिस्टम फ़ॉन्ट का इस्तेमाल करें. यह पुराने और सीमित डिवाइसों वाले डिवाइसों के लिए भी बेहतर परफ़ॉर्म कर सकता है.
• WOFF और WOFF 2.0, अब भी इस्तेमाल किए जा रहे मॉडर्न और लेगसी ब्राउज़र के सभी बेस को कवर करता है. इसलिए, EOT और TTF का इस्तेमाल करना अब ज़रूरी नहीं है. इसकी वजह से वेब फ़ॉन्ट डाउनलोड होने में ज़्यादा समय लग सकता है.

वेब फ़ॉन्ट और कंप्रेस करना

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

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

@font-face की मदद से फ़ॉन्ट फ़ैमिली तय करें

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

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

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

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

सही फ़ॉर्मैट चुनें

हर @font-face एलान में फ़ॉन्ट फ़ैमिली का नाम दिया जाता है, जो कई जानकारी के लॉजिकल ग्रुप के तौर पर काम करता है. साथ ही, यह स्टाइल, वेट, और स्ट्रेच जैसी फ़ॉन्ट प्रॉपर्टी और src डिस्क्रिप्टर के साथ-साथ, फ़ॉन्ट रिसॉर्स के लिए जगहों की प्राथमिकता के आधार पर दी गई सूची के बारे में बताता है.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

सबसे पहले, ध्यान दें कि ऊपर दिए गए उदाहरण दो स्टाइल (सामान्य और इटैलिक) वाली एक बहुत अच्छे फ़ॉन्ट फ़ैमिली के बारे में बताते हैं. इनमें से हर एक फ़ॉन्ट रिसॉर्स के अलग सेट के बारे में बताता है. इसके बदले में, हर src डिस्क्रिप्टर में, रिसॉर्स वैरिएंट की प्राथमिकता वाली, कॉमा लगाकर अलग की गई सूची होती है:

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

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

1. ब्राउज़र, पेज लेआउट का इस्तेमाल करता है. साथ ही, यह तय करता है कि बताए गए टेक्स्ट को पेज पर रेंडर करने के लिए, कौनसे फ़ॉन्ट वैरिएंट की ज़रूरत है. जो फ़ॉन्ट पेज के CSS ऑब्जेक्ट मॉडल (CSSOM) का हिस्सा नहीं हैं उन्हें ब्राउज़र डाउनलोड नहीं करता है, क्योंकि उनकी ज़रूरत नहीं है.
2. हर ज़रूरी फ़ॉन्ट के लिए, ब्राउज़र यह जांच करता है कि वह फ़ॉन्ट स्थानीय तौर पर उपलब्ध है या नहीं.
3. अगर फ़ॉन्ट डिवाइस पर उपलब्ध नहीं है, तो ब्राउज़र इसे एक्सटर्नल डेफ़िनिशन पर फिर से लागू करता है:
   • अगर फ़ॉर्मैट का संकेत मौजूद है, तो डाउनलोड शुरू करने से पहले ब्राउज़र यह जांच करता है कि वह हिंट के साथ काम करता है या नहीं. अगर ब्राउज़र इस संकेत का समर्थन नहीं करता है, तो ब्राउज़र अगले संकेत पर चला जाता है.
   • अगर किसी फ़ॉर्मैट का संकेत मौजूद नहीं है, तो ब्राउज़र उस संसाधन को डाउनलोड करता है.

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

यूनिकोड-रेंज की सबसेटिंग

स्टाइल, वेट, और स्ट्रेच जैसी फ़ॉन्ट प्रॉपर्टी के अलावा, @font-face नियम की मदद से हर रिसॉर्स के साथ काम करने वाले यूनिकोड कोडपॉइंट का एक सेट तय किया जा सकता है. इसकी मदद से, बड़े यूनिकोड फ़ॉन्ट को छोटे-छोटे सबसेट (उदाहरण के लिए, लैटिन, सिरिलिक, और ग्रीक सबसेट) में बांटा जा सकता है. साथ ही, सिर्फ़ किसी खास पेज पर टेक्स्ट को रेंडर करने के लिए ज़रूरी ग्लिफ़ डाउनलोड किए जा सकते हैं.

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

• सिंगल कोडपॉइंट (उदाहरण के लिए, U+416)
• इंटरवल रेंज (उदाहरण के लिए, U+400-4ff): इससे किसी रेंज के शुरुआती और आखिरी कोडपॉइंट के बारे में पता चलता है
• वाइल्डकार्ड रेंज (उदाहरण के लिए, U+4??): ? वर्ण किसी भी हेक्साडेसिमल अंक को दिखाते हैं

उदाहरण के लिए, अपने Awesome Font फ़ैमिली ग्रुप को लैटिन और जैपनीज़ भाषा में बांटा जा सकता है सबसेट, जिनमें से प्रत्येक को ब्राउज़र ज़रूरत के अनुसार डाउनलोड करता है:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

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

1. तय करें कि किन सबसेट की ज़रूरत है:
   • अगर ब्राउज़र यूनिकोड-रेंज सब-सेटिंग की सुविधा देता है, तो वह अपने-आप सही सबसेट चुन लेगा. पेज के लिए सिर्फ़ सबसेट फ़ाइलें उपलब्ध करानी होंगी और @font-face नियमों में सही यूनिकोड-रेंज तय करनी होंगी.
   • अगर ब्राउज़र यूनिकोड-रेंज सबसेटिंग की सुविधा पर काम नहीं करता है, तो पेज को सभी ग़ैर-ज़रूरी सबसेट छिपाने होंगे; इसका मतलब है कि डेवलपर को ज़रूरी सबसेट तय करने होंगे.
2. फ़ॉन्ट के सबसेट जनरेट करना:
   • अपने फ़ॉन्ट का सबसेट बनाने और उन्हें ऑप्टिमाइज़ करने के लिए ओपन-सोर्स pyftsubset टूल का इस्तेमाल करें.
   • कुछ फ़ॉन्ट सर्वर—जैसे Google फ़ॉन्ट—अपने-आप ही डिफ़ॉल्ट रूप से सबसेट हो जाएंगे.
   • कुछ फ़ॉन्ट सेवाएं, कस्टम क्वेरी पैरामीटर के ज़रिए मैन्युअल सबसेट करने की अनुमति देती हैं. इनका इस्तेमाल, अपने पेज के लिए ज़रूरी सबसेट को मैन्युअल तौर पर तय करने के लिए किया जा सकता है. फ़ॉन्ट की सेवा देने वाली कंपनी के दस्तावेज़ देखें.

फ़ॉन्ट चुनना और सिंथेसिस

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

ऊपर दिया गया डायग्राम, तीन अलग-अलग बोल्ड वेट वाली फ़ॉन्ट फ़ैमिली के बारे में बताता है:

• 400 (सामान्य).
• 700 (बोल्ड).
• 900 (अतिरिक्त बोल्ड).

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

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

सीएसएस का फ़ॉन्ट मैचिंग एल्गोरिदम

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

ऊपर दिया गया उदाहरण Awesome Font फ़ैमिली के बारे में बताता है. यह ऐसे दो संसाधनों से मिलकर बना है जो लैटिन ग्लिफ़ (U+000-5FF) के एक जैसे सेट को कवर करते हैं, लेकिन दो अलग-अलग "वेट" ऑफ़र करते हैं: सामान्य (400) और बोल्ड (700). हालांकि, अगर आपका कोई सीएसएस नियम अलग फ़ॉन्ट वेट तय करता है या font-style प्रॉपर्टी को italic पर सेट करता है, तो क्या होगा?

• अगर फ़ॉन्ट का एग्ज़ैक्ट मैच उपलब्ध नहीं है, तो ब्राउज़र उससे मिलते-जुलते फ़ॉन्ट को बदल देता है.
• अगर कोई स्टाइल मैच नहीं मिलता (उदाहरण के लिए, ऊपर दिए गए उदाहरण में किसी इटैलिक वैरिएंट का एलान नहीं किया गया है), तो ब्राउज़र, फ़ॉन्ट के अपने वैरिएंट को सिंथेसाइज़ करता है.

ऊपर दिया गया उदाहरण Open Sans के लिए वास्तविक बनाम संश्लेषित फ़ॉन्ट नतीजों के बीच का अंतर दिखाता है. सिंथेसाइज़ किए गए सभी वैरिएंट, 400 मोटाई वाले एक फ़ॉन्ट से जनरेट किए जाते हैं. जैसा कि आपको दिख रहा है, नतीजों में काफ़ी अंतर दिख गया है. बोल्ड और तिरछे वैरिएंट जनरेट करने के तरीके की जानकारी नहीं दी गई है. इसलिए, अलग-अलग ब्राउज़र के नतीजे अलग-अलग होते हैं और बहुत ज़्यादा फ़ॉन्ट पर निर्भर होते हैं.

वेब फ़ॉन्ट साइज़ ऑप्टिमाइज़ेशन चेकलिस्ट

• अपने फ़ॉन्ट के इस्तेमाल को ऑडिट और मॉनिटर करें: अपने पेजों पर बहुत ज़्यादा फ़ॉन्ट का इस्तेमाल न करें. साथ ही, हर फ़ॉन्ट के लिए, इस्तेमाल किए गए वैरिएंट की संख्या कम से कम रखें. इससे आपके उपयोगकर्ताओं को ज़्यादा एक जैसा और तेज़ अनुभव उपलब्ध कराने में मदद मिलती है.
• अगर हो सके, तो लेगसी फ़ॉर्मैट का इस्तेमाल न करें: EOT, TTF, और WOFF फ़ॉर्मैट, WOFF 2.0 से बड़े हैं. EOT और TTF पूरी तरह से गैर-ज़रूरी फ़ॉर्मैट हैं, जबकि अगर आपको Internet Explorer 11 के साथ काम करने की ज़रूरत है, तो WOFF स्वीकार किया जा सकता है. यदि आप केवल आधुनिक ब्राउज़र को लक्षित करते हैं, तो WOFF 2.0 का उपयोग करना ही सबसे सरल और सबसे अच्छा प्रदर्शन करने वाला विकल्प है.
• अपने फ़ॉन्ट संसाधनों का सबसेट बनाना: कई फ़ॉन्ट का सबसेट बनाया जा सकता है या किसी खास पेज की ज़रूरत के glyph को डिलीवर करने के लिए उन्हें एक से ज़्यादा यूनिकोड-रेंज में बांटा जा सकता है. इससे फ़ाइल का साइज़ कम हो जाता है और संसाधन को डाउनलोड करने की स्पीड बढ़ जाती है. हालांकि, सबसेट तय करते समय, फ़ॉन्ट के दोबारा इस्तेमाल के लिए ऑप्टिमाइज़ करने का ध्यान रखें. उदाहरण के लिए, हर पेज पर वर्णों का एक अलग, लेकिन ओवरलैप होने वाला सेट डाउनलोड न करें. ऐप्लिकेशन स्क्रिप्ट के आधार पर सबसेट बनाना एक अच्छा तरीका है: उदाहरण के लिए, लैटिन और सिरिलिक.
• अपनी src सूची में local() को प्राथमिकता दें: आपकी src सूची में local('Font Name') को सबसे पहले शामिल करने से, यह पक्का होता है कि एचटीटीपी अनुरोध, पहले से इंस्टॉल किए गए फ़ॉन्ट के लिए नहीं किए जाएंगे.
• टेक्स्ट कंप्रेशन की जांच करने के लिए, Lighthouse का इस्तेमाल करें.

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) और लेआउट शिफ़्ट (सीएलएस) पर होने वाले असर

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

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

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