यह गाइड बताती है कि अपने वेब में फ़ॉन्ट जोड़ने के लिए, 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>
इसके बाद फ़ाइल को किसी मॉडर्न वेब ब्राउज़र में खोलें. आपको ऐसा पेज दिखेगा जिसमें फ़ॉलो किया जा रहा है:
यह वाक्य साधारण टेक्स्ट है. इसलिए, सीएसएस का इस्तेमाल करके, इसमें बदलाव किया जा सकता है. आज़माएँ पिछले उदाहरण में शैली में शैडो जोड़ना:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
अब आपको टेक्स्ट के नीचे एक ड्रॉप शैडो दिखेगा:
यह सिर्फ़ ऐसी शुरुआत है जो फ़ॉन्ट एपीआई और सीएसएस की मदद से की जा सकती है.
खास जानकारी
सिर्फ़ दो चरणों में, 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
एक से ज़्यादा फ़ॉन्ट फ़ैमिली का अनुरोध करने के लिए, नामों को पाइप वर्ण से अलग करें
(|).
उदाहरण के लिए, फ़ॉन्ट का अनुरोध करने के लिए टैंजरीन, 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= वैल्यू तय करनी चाहिए
अनुरोध URL है. इससे Google आपके लिए ऑप्टिमाइज़ की गई फ़ॉन्ट फ़ाइल वापस कर पाता है
अनुरोध. कुछ मामलों में, इससे फ़ॉन्ट फ़ाइल का साइज़ 90% तक कम किया जा सकता है.
इस सुविधा का इस्तेमाल करने के लिए, बस अपने Google Fonts API अनुरोधों में text= जोड़ें. इसके लिए
उदाहरण के लिए, यदि आप अपने ब्लॉग के शीर्षक के लिए केवल Inconsolata का उपयोग कर रहे हैं, तो आप
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 फ़ॉन्ट में 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 | 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 API से मिलने वाली, फ़ॉन्ट फ़ैमिली की पूरी सूची यहां देखें: Google Fonts.
- वेब फ़ॉन्ट लोडर का उपयोग करके अपने ब्राउज़र पर फ़ॉन्ट लोड करने पर ज़्यादा कंट्रोल मिलता है.
- इस बारे में ज़्यादा जानें कि Google Fonts API कैसे काम करता है तकनीकी विचार वाला पेज.