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

वेब फ़ॉन्ट को बेहतर तरीके से डिलीवर करने के लिए, 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 Japanese का सिर्फ़ एक वेट लगभग 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 से ज़्यादा ग्लिफ़ होते.

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

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

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

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

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

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

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

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

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

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

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

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

इन्हें लागू करना आसान है और इन्हें आपके हिसाब से ऑप्टिमाइज़ किया गया है

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

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

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

धन्यवाद

leesehee की हीरो इमेज.