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

Ilya Grigorik

Jeremy Wagner

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

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

वेब फ़ॉन्ट की संरचना

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

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

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

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

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

• EOT
• TTF
• WOFF
• WOFF2.

WOFF और WOFF 2.0, सभी मॉडर्न ब्राउज़र पर काम करते हैं.

• मॉडर्न ब्राउज़र के लिए, WOFF 2.0 वैरिएंट का इस्तेमाल करें.
• अगर बहुत ज़रूरी हो, तो फ़ॉलबैक के तौर पर WOFF का इस्तेमाल करें. जैसे, अगर आपको अब भी Internet Explorer 11 के लिए काम करने वाले फ़ॉन्ट की ज़रूरत है.
• इसके अलावा, लेगसी ब्राउज़र के लिए वेब फ़ॉन्ट का इस्तेमाल न करने और सिस्टम फ़ॉन्ट पर फ़ॉलबैक करने पर विचार करें. यह पुराने और कम क्षमता वाले डिवाइसों के लिए भी बेहतर हो सकता है.
• 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 डिस्क्रिप्टर के लॉजिकल ग्रुप के तौर पर काम करता है. 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');
}

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

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

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

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

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

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

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

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

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

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

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

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