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

Ilya Grigorik

Jeremy Wagner

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

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

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

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

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

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

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

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

• ईओटी
• टीटीएफ़
• डब्ल्यूऑफ़
• 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() संकेत शामिल किया जा सकता है, जो दिए गए यूआरएल से रेफ़र किए गए फ़ॉन्ट के फ़ॉर्मैट को दिखाता है.

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

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

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

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

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

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

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

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

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

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

@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 फ़ॉन्ट फ़ैमिली के बारे में बताया गया है. यह फ़ैमिली, दो रिसॉर्स से मिलकर बनी है जो लैटिन ग्लिफ़ (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 का इस्तेमाल करना सबसे आसान और बेहतर परफ़ॉर्म करने वाला विकल्प है.
• अपने फ़ॉन्ट संसाधनों का सबसेट बनाना: कई फ़ॉन्ट का सबसेट बनाया जा सकता है या उन्हें किसी खास पेज के लिए ज़रूरी glyphs डिलीवर करने के लिए एक से ज़्यादा यूनिकोड-रेंज में बांटा जा सकता है. इससे फ़ाइल का साइज़ कम हो जाता है और संसाधन की डाउनलोड स्पीड बेहतर हो जाती है. हालांकि, सबसेट तय करते समय, फ़ॉन्ट को दोबारा इस्तेमाल करने के लिए ऑप्टिमाइज़ करते समय सावधानी बरतें. उदाहरण के लिए, हर पेज पर एक अलग, लेकिन ओवरलैप होने वाले वर्णों का सेट डाउनलोड न करें. स्क्रिप्ट के आधार पर सबसेट बनाना एक अच्छा तरीका है: उदाहरण के लिए, लैटिन और सिरिलिक.
• अपनी src सूची में local() को प्राथमिकता दें: अपनी src सूची में local('Font Name') को पहले शामिल करने से, यह पक्का होता है कि एचटीटीपी अनुरोध पहले से इंस्टॉल किए गए फ़ॉन्ट के लिए नहीं भेजे जाते हैं.
• टेक्स्ट कंप्रेस करने की सुविधा को जांचने के लिए, Lighthouse का इस्तेमाल करें.

सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) और कुल लेआउट शिफ़्ट (सीएलएस) पर असर

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

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

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