तेज़ और खूबसूरत वेब फ़ॉन्ट के लिए एपीआई

वेब फ़ॉन्ट को बेहतर तरीके से डिलीवर करने के लिए, Google Fonts CSS API का इस्तेमाल करने का तरीका.

Jimmy Mooney

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

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

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

ये सभी काम अपने कोड में एचटीएमएल की एक लाइन शामिल करने से होते हैं.

Google Fonts CSS API को इस्तेमाल करने का तरीका

Google Fonts CSS API दस्तावेज़ में, इसके बारे में अच्छी तरह से बताया गया है:

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

आपको कम से कम अपने एचटीएमएल में एक लाइन शामिल करनी होगी, जैसे कि:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

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

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

फ़ॉन्ट फ़ाइलें बड़ी हो सकती हैं, लेकिन ज़रूरी नहीं कि वे

वेब फ़ॉन्ट बड़े हो सकते हैं; यह सच है. WOFF2 में Noto Sans जापानी का सिर्फ़ एक वज़न करीब 3.4 एमबी है—और इसे आपके हर उपयोगकर्ता के लिए डाउनलोड करना आपके पेज लोड होने में लगने वाले समय को कम कर देगा. जब हर मिलीसेकंड की गिनती हो और हर बाइट कीमती हो, तो पक्का करें कि आप सिर्फ़ वही डेटा लोड कर रहे हों जो आपके उपयोगकर्ताओं को चाहिए.

Google Fonts CSS API, रीयल टाइम में जनरेट होने वाली बहुत छोटी फ़ॉन्ट फ़ाइलें बना सकता है, ताकि उपयोगकर्ताओं को सिर्फ़ आपकी वेबसाइट के लिए ज़रूरी टेक्स्ट और स्टाइल दिखाया जा सके. पूरा फ़ॉन्ट दिखाने के बजाय, text पैरामीटर का इस्तेमाल करके, खास वर्णों के लिए अनुरोध किया जा सकता है.

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

CSS API, किसी भी एपीआई पैरामीटर के बिना, आपके उपयोगकर्ताओं को अपने-आप दूसरे वेब फ़ॉन्ट ऑप्टिमाइज़ेशन की सुविधा भी देता है. एपीआई, आपके उपयोगकर्ताओं को unicode-range पहले से चालू (अगर उनके वेब ब्राउज़र पर काम करता है) वाली सीएसएस फ़ाइलें उपलब्ध कराएगा. इससे वे सिर्फ़ उन खास वर्णों के लिए फ़ॉन्ट लोड कर पाएंगे जो आपकी वेबसाइट को चाहिए.

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

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

CSS API और यूनिकोड-रेंज का इस्तेमाल करने से, फ़ाइल ट्रांसफ़र को करीब 90% तक कम किया जा सकता है. unicode-range डिस्क्रिप्टर का इस्तेमाल करके, हर हिस्से को अलग-अलग तय किया जा सकता है. साथ ही, हर स्लाइस को सिर्फ़ तब डाउनलोड किया जाता है, जब आपके कॉन्टेंट में इन वर्ण सीमाओं में से कोई एक वर्ण शामिल हो.

उदाहरण: अगर आपको Noto Sans JP में सिर्फ़ "こにちは" शब्द सेट करना है, तो:

• अपनी WOFF2 फ़ाइलें खुद होस्ट करें.
• WOFF2 वापस पाने के लिए, CSS API का इस्तेमाल करें.
• सीएसएस एपीआई का इस्तेमाल उस text= पैरामीटर के साथ करें, जिसे “こにちは” पर सेट किया गया हो.

इस उदाहरण में, यह देखा जा सकता है कि CSS API का इस्तेमाल करके, आपने WOFF2 फ़ॉन्ट को खुद होस्ट करने के मुकाबले पहले से ही 97.5% की बचत की है. ऐसा बड़े फ़ॉन्ट को यूनिकोड-रेंज में अलग करने के लिए, एपीआई की बिल्ट-इन सहायता की वजह से होता है. इसे एक कदम आगे ले जाकर और जिस टेक्स्ट को आपको दिखाना है उसके बारे में जानकारी देकर, CSS API फ़ॉन्ट के साइज़ को सिर्फ़ 95.3% तक कम किया जा सकता है. यह खुद होस्ट किए गए फ़ॉन्ट से 99.9% कम है.

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

Google Fonts CSS API की मदद से, अपने वेब फ़ॉन्ट को आने वाले समय में बेहतर बनाएं

Google Fonts की टीम, W3C के नए स्टैंडर्ड बनाने में भी योगदान देती है. इससे WOFF2 जैसी वेब फ़ॉन्ट टेक्नोलॉजी के लिए लगातार काम किया जाता है. फ़िलहाल, एक प्रोजेक्ट इंक्रीमेंटल फ़ॉन्ट ट्रांसफ़र है. इसकी मदद से, उपयोगकर्ता स्क्रीन पर इस्तेमाल होने के दौरान फ़ॉन्ट फ़ाइलों के बहुत छोटे हिस्से लोड कर पाते हैं. साथ ही, मांग पर स्ट्रीम करने के दौरान फ़ॉन्ट फ़ाइलों को यूनिकोड की रेंज से बेहतर बना पाते हैं. जब हमारे वेब फ़ॉन्ट एपीआई का इस्तेमाल किया जाता है, तो आपके उपयोगकर्ताओं को फ़ॉन्ट ट्रांसफ़र करने की इन टेक्नोलॉजी में सुधार के सुझाव मिलते हैं. ये सुधार, उनके ब्राउज़र में उपलब्ध होने पर ही मिलते हैं.

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

वैरिएबल फ़ॉन्ट पहले से मौजूद होते हैं

वैरिएबल फ़ॉन्ट ऐसी फ़ॉन्ट फ़ाइलें हैं जो एक से ज़्यादा ऐक्सिस के बीच डिज़ाइन के अलग-अलग वैरिएंट स्टोर कर सकती हैं. Google Fonts CSS API के नए वर्शन में, ये सुविधाएं काम करती हैं. विविधता का एक अतिरिक्त अक्ष जोड़ने से फ़ॉन्ट के साथ नई सहूलियत मिलती है—लेकिन यह फ़ॉन्ट फ़ाइल का आकार करीब दोगुना कर सकता है.

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

लागू करने में आसान, आपके लिए ऑप्टिमाइज़ किया गया

Google Fonts CSS API से, आपको ऐसे फ़ॉन्ट डिलीवर करने में मदद मिलती है जो:

• वेब ब्राउज़र के साथ ज़्यादा काम करता है.
• जितना हो सके उतना छोटा.
• जल्दी डिलीवर हो गया.
• आपके लिए इस्तेमाल करना ज़्यादा आसान.

Google Fonts के बारे में ज़्यादा जानकारी के लिए, fonts.google.com पर जाएं. सीएसएस एपीआई के बारे में ज़्यादा जानने के लिए, एपीआई दस्तावेज़ देखें.

स्वीकार हैं

leeehe की ओर से हीरो इमेज.