इस गाइड में बताया गया है कि अपने वेब पेजों में फ़ॉन्ट जोड़ने के लिए, Google Fonts API का इस्तेमाल कैसे करें. आपको कोई प्रोग्रामिंग करने की ज़रूरत नहीं है. आपको बस अपने एचटीएमएल दस्तावेज़ में एक खास स्टाइलशीट का लिंक जोड़ना है. इसके बाद, सीएसएस स्टाइल के फ़ॉन्ट देखें.
छोटा सा उदाहरण
यहां एक उदाहरण दिया गया है. नीचे दिए गए एचटीएमएल को कॉपी करके किसी फ़ाइल में चिपकाएं:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
फिर फ़ाइल को किसी आधुनिक वेब ब्राउज़र में खोलें. आपको टैंजरीन नाम के फ़ॉन्ट में एक पेज दिखेगा, जिसमें ये चीज़ें होंगी:
यह वाक्य सामान्य टेक्स्ट है, इसलिए आप CSS का उपयोग करके इसके दिखने का तरीका बदल सकते हैं. ऊपर दिए गए उदाहरण में, स्टाइल में कोई शैडो जोड़कर देखें:
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
अब आपको टेक्स्ट के नीचे एक ड्रॉप शैडो दिखेगा:
फ़ॉन्ट API और सीएसएस का इस्तेमाल करके, क्या किया जा सकता है, यह सिर्फ़ शुरुआत है.
खास जानकारी
Google Fonts API का इस्तेमाल सिर्फ़ दो चरणों में किया जा सकता है:
अपनी पसंद के वेब फ़ॉन्ट का अनुरोध करने के लिए, स्टाइलशीट का लिंक जोड़ें:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
किसी एलिमेंट को, अनुरोध किए गए वेब फ़ॉन्ट के साथ स्टाइल करें, या तो स्टाइलशीट में:
.css-selector { font-family: 'Font Name', serif; }या एलिमेंट पर इनलाइन स्टाइल के साथ:
<div style="font-family: 'Font Name', serif;">Your text</div>
इस्तेमाल किए जा सकने वाले फ़ॉन्ट की सूची के लिए, Google Fonts देखें.
स्टाइलशीट यूआरएल में फ़ॉन्ट फ़ैमिली और स्टाइल तय करना
यह तय करने के लिए कि आपकी स्टाइलशीट लिंक में कौनसा यूआरएल इस्तेमाल किया जाए, Google Fonts API के बेस यूआरएल से शुरुआत करें:
https://fonts.googleapis.com/css
इसके बाद, family= यूआरएल पैरामीटर जोड़ें. इसमें, एक या उससे ज़्यादा फ़ॉन्ट फ़ैमिली के नाम और स्टाइल जोड़ें.
उदाहरण के लिए, Inconsolata फ़ॉन्ट का अनुरोध करने के लिए:
https://fonts.googleapis.com/css?family=Inconsolata
एक से ज़्यादा फ़ॉन्ट फ़ैमिली का अनुरोध करने के लिए, नामों को पाइप कैरेक्टर से अलग करें
(|).
उदाहरण के लिए, फ़ॉन्ट का अनुरोध करने के लिए Tangerin, Inconsolata, और Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
एक से ज़्यादा फ़ॉन्ट के लिए अनुरोध करने से, उन सभी फ़ॉन्ट का इस्तेमाल अपने पेज में किया जा सकता है. (लेकिन ओवरबोर्ड न करें; ज़्यादातर पेजों को बहुत ज़्यादा फ़ॉन्ट की ज़रूरत नहीं होती और बहुत ज़्यादा फ़ॉन्ट का अनुरोध करने से आपके पेजों को लोड होने की रफ़्तार कम हो सकती है.)
Google Fonts API, अनुरोध किए गए फ़ॉन्ट का सामान्य वर्शन डिफ़ॉल्ट रूप से उपलब्ध कराता है. अन्य स्टाइल या मोटाई का अनुरोध करने के लिए, फ़ॉन्ट के नाम के साथ कोलन (:) जोड़ें. इसके बाद, स्टाइल या मोटाई की सूची को कॉमा (,) से अलग करें.
उदाहरण के लिए:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
किसी दिए गए फ़ॉन्ट के लिए उपलब्ध स्टाइल और वेट के बारे में जानने के लिए, Google Fonts में फ़ॉन्ट की लिस्टिंग देखें.
आप जिस शैली का अनुरोध करते हैं, उसके लिए पूरा नाम या संक्षिप्त नाम दिया जा सकता है; मोटाई के लिए, वैकल्पिक रूप से आप एक संख्यात्मक वज़न तय कर सकते हैं:
| स्टाइल | जानकारी देने वाले |
|---|---|
| इटैलिक शैली में लिखा हुआ टेक्स्ट | italic या i |
| बोल्ड | bold या b या कोई संख्यात्मक वज़न, जैसे कि 700 |
| बोल्ड इटैलिक | bolditalic या bi |
उदाहरण के लिए, Cantarell इटैलिक और Droid Serif बोल्ड का अनुरोध करने के लिए, इनमें से किसी भी यूआरएल का इस्तेमाल किया जा सकता है:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
फ़ॉन्ट-डिसप्ले का इस्तेमाल करें
font-display से आप यह कंट्रोल कर सकते हैं कि फ़ॉन्ट उपलब्ध न होने पर क्या होगा. आम तौर पर, डिफ़ॉल्ट auto से दूसरी वैल्यू तय करना सही होता है.
क्वेरी स्ट्रिंग display पैरामीटर में मनचाहे मान पास करें:
https://fonts.googleapis.com/css?family=Roboto&display=swap
स्क्रिप्ट सबसेट तय किए जा रहे हैं
Google फ़ॉन्ट डायरेक्ट्री के कुछ फ़ॉन्ट एक से ज़्यादा स्क्रिप्ट (जैसे कि लैटिन, सिरिलिक, और ग्रीक) के साथ काम करते हैं. यह तय करने के लिए कि कौनसे सबसेट डाउनलोड किए जाएं, यूआरएल में सबसेट पैरामीटर जोड़ना चाहिए.
उदाहरण के लिए, Roboto Mono फ़ॉन्ट के सिरिलिक सबसेट का अनुरोध करने के लिए, यूआरएल इस तरह होगा:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Roboto Mono फ़ॉन्ट के ग्रीक सबसेट का अनुरोध करने के लिए, यूआरएल यह होगा:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Roboto Mono फ़ॉन्ट के ग्रीक और सिरिलिक दोनों सबसेट का अनुरोध करने के लिए, यूआरएल यह होगा:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
अगर उपलब्ध हो, तो लैटिन सबसेट को हमेशा शामिल किया जाता है. हालांकि, इसके बारे में बताने की ज़रूरत नहीं होती. कृपया ध्यान दें कि अगर किसी क्लाइंट ब्राउज़र पर यूनिकोड-रेंज (http://caniuse.com/#feat=font-unicode-range) काम करती है, तो सबसेट पैरामीटर को अनदेखा कर दिया जाता है; ब्राउज़र, फ़ॉन्ट के साथ काम करने वाले सबसेट से चुनेगा. इससे वह पता लगाएगा कि टेक्स्ट को रेंडर करने के लिए उसे क्या चाहिए.
उपलब्ध फ़ॉन्ट और फ़ॉन्ट सबसेट की पूरी सूची देखने के लिए, कृपया Google Fonts देखें.
अपने फ़ॉन्ट अनुरोध ऑप्टिमाइज़ करना
अक्सर, जब आपको अपनी वेबसाइट या ऐप्लिकेशन पर वेब फ़ॉन्ट का इस्तेमाल करना होता है, तो आपको पहले से पता होता है कि आपको किन अक्षरों की ज़रूरत होगी. ऐसा अक्सर तब होता है, जब किसी लोगो या हेडिंग में वेब फ़ॉन्ट इस्तेमाल किया जाता है.
इन मामलों में, आपको अपने फ़ॉन्ट के अनुरोध वाले यूआरएल में text= वैल्यू तय करनी चाहिए. इससे Google, आपके अनुरोध के हिसाब से ऑप्टिमाइज़ की गई फ़ॉन्ट फ़ाइल दिखा पाता है. कुछ मामलों में, इससे फ़ॉन्ट फ़ाइल का साइज़ 90% तक कम हो सकता है.
इस सुविधा का इस्तेमाल करने के लिए, बस अपने Google Fonts API अनुरोधों में text= जोड़ें. उदाहरण
के लिए, अगर अपने ब्लॉग के टाइटल के लिए सिर्फ़ InConolata का इस्तेमाल किया जा रहा है, तो टाइटल को text= की वैल्यू के तौर पर रखा जा सकता है. अनुरोध कुछ ऐसा दिखेगा:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
सभी क्वेरी स्ट्रिंग की तरह ही, आपको वैल्यू को यूआरएल-कोड में बदलना चाहिए:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
यह सुविधा अंतरराष्ट्रीय फ़ॉन्ट के लिए भी काम करती है. इससे UTF-8 वर्णों के बारे में बताया जा सकता है. उदाहरण के लिए, ¡Hola! को इस तरह दिखाया जाता है:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
फ़ॉन्ट इफ़ेक्ट चालू करना (बीटा वर्शन)
अपनी वेबसाइट पर हेडर या टेक्स्ट दिखाते समय, आपको अक्सर अपने टेक्स्ट को सजावटी तरीके से आकर्षक बनाना होता है. आपके काम को आसान बनाने के लिए, Google ने फ़ॉन्ट इफ़ेक्ट का एक कलेक्शन उपलब्ध कराया है. इसका इस्तेमाल करके, डिसप्ले के लिए दिखने वाले अच्छे टेक्स्ट को आसानी से बनाया जा सकता है. उदाहरण के लिए:
इस बीटा सुविधा का इस्तेमाल करने के लिए, बस अपने Google Fonts API अनुरोध में effect= जोड़ें. साथ ही, आपको जिन एचटीएमएल एलिमेंट पर असर डालना है उनमें संबंधित क्लास का नाम जोड़ें. ऊपर दिए गए उदाहरण में, हमने shadow-multiple फ़ॉन्ट इफ़ेक्ट का इस्तेमाल किया है,
इसलिए अनुरोध ऐसा दिखेगा:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
इफ़ेक्ट का इस्तेमाल करने के लिए, अपने एचटीएमएल एलिमेंट में संबंधित क्लास का नाम जोड़ें. संबंधित क्लास का नाम हमेशा इफ़ेक्ट का नाम होता है, जिससे पहले font-effect- होता है.
इसलिए, shadow-multiple के लिए क्लास का नाम font-effect-shadow-multiple होगा:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
इफ़ेक्ट के नामों को पाइप वर्ण (|) से अलग-अलग करके, कई इफ़ेक्ट का अनुरोध किया जा सकता है.
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
यहां हमारे सभी फ़ॉन्ट इफ़ेक्ट की पूरी सूची दी गई है:
| असर | एपीआई का नाम | क्लास का नाम | सहायता |
|---|---|---|---|
| एनाग्लिफ़ | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| ईंट का निशान | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
| कैनवस प्रिंट | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
| क्रैकल | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
| विनाश | destruction |
font-effect-destruction |
Chrome, Safari |
| परेशान | distressed |
font-effect-distressed |
Chrome, Safari |
| डिस्ट्रेस वुड | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
| एंबॉस | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
| आग | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
| फ़ायर ऐनिमेशन | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
| नाज़ुक | fragile |
font-effect-fragile |
Chrome, Safari |
| घास | grass |
font-effect-grass |
Chrome, Safari |
| आइस | ice |
font-effect-ice |
Chrome, Safari |
| माइटोसिस | mitosis |
font-effect-mitosis |
Chrome, Safari |
| नियॉन | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
| आउटलाइन | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| हरे रंग का इस्तेमाल | putting-green |
font-effect-putting-green |
Chrome, Safari |
| स्कफ़्ड स्टील | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
| एक से ज़्यादा शैडो | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| स्प्लिट किया गया | splintered |
font-effect-splintered |
Chrome, Safari |
| स्टैटिक | static |
font-effect-static |
Chrome, Safari |
| स्टोनवॉश | stonewash |
font-effect-stonewash |
Chrome, Safari |
| तीन डाइमेंशन | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
| तीन डाइमेंशन वाला फ़्लोट | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
| विंटेज | vintage |
font-effect-vintage |
Chrome, Safari |
| वॉलपेपर | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
फ़ॉन्ट की स्टाइल बदलने के और भी तरीके हैं. सीएसएस की मदद से कई काम किए जा सकते हैं. शुरुआत करने के लिए, हम आपको सिर्फ़ कुछ आइडिया दे रहे हैं. ज़्यादा आइडिया के लिए, Google पर "सीएसएस टेक्स्ट इफ़ेक्ट" खोजने की सुविधा आज़माएं. साथ ही, वेब पर पहले से मौजूद कई आइडिया ब्राउज़ करें!
इसके बारे में और पढ़ें
- Google Fonts पर, Google Fonts API से मिले फ़ॉन्ट फ़ैमिली की पूरी सूची देखें.
- फ़ॉन्ट लोड करने पर ज़्यादा कंट्रोल रखने के लिए, वेब फ़ॉन्ट लोडर इस्तेमाल करने का तरीका जानें.
- Google Fonts API के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, तकनीकी विचार पेज पर जाएं.