इस पेज का अनुवाद Cloud Translation API से किया गया है.

सीएसएस एपीआई का अपडेट

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

नया क्या है

यह सब एक नए बेस यूआरएल से शुरू होता है:

https://fonts.googleapis.com/css2

हर फ़ैमिली में स्टाइल के बारे में बताने वाला सिंटैक्स बदल गया है. इससे वैरिएबल के फ़ॉन्ट के लिए बने स्पेस के बारे में जानकारी मिलती है.

क्विकस्टार्ट गाइड

इस HTML को फ़ाइल में कॉपी करें और चिपकाएं:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

फ़ाइल खोलने के लिए ब्राउज़र का इस्तेमाल करके, पेज को क्रिमसन प्रो फ़ॉन्ट में, “वेब को सुंदर बनाना" टेक्स्ट दिखाना चाहिए.

वेब को सुंदर बनाना!

एक से ज़्यादा परिवार

एक से ज़्यादा परिवारों का अनुरोध करने के लिए, हर परिवार के लिए family= पैरामीटर तय करें.

उदाहरण के लिए, फ़ॉन्ट का अनुरोध करने के लिए क्रिमसन प्रो और लाइट्राटा:

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

इस HTML को फ़ाइल में कॉपी करें और चिपकाएं:

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
    <style>
      body {
        font-size: 48px;
      }
      div:nth-child(1) {
        font-family: 'Crimson Pro', serif;
      }
      div:nth-child(2) {
        font-family: 'Literata’, serif;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

फ़ाइल खोलने के लिए, ब्राउज़र का उपयोग करते हुए, पेज को पहले, "वेब के लिए सुंदर बनाना" टेक्स्ट दिखाई देना चाहिए, पहले Cramson Pro में और फिर Litera में.

वेब को सुंदर बनाना!

ऐक्सिस रेंज

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

किसी फ़ॉन्ट फ़ॉन्ट रेंज की रेंज का अनुरोध करने के लिए, दो वैल्यू के साथ .. का इस्तेमाल करें

फ़ॉन्ट	अनुरोध
क्रिमसन प्रो [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
क्रिमसन प्रो इटैलिक [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
क्रिमसन प्रो बोल्ड इटैलिक और [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

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

अगर आपके ब्राउज़र में वैरिएबल फ़ॉन्ट पूरी तरह से इस्तेमाल किए जा सकते हैं (बदल सकते हैं), तो नीचे दिए गए टेक्स्ट में क्रिमसन प्रो को 400 से 500 के बीच के वज़न वाले सेट के तौर पर दिखाया जाना चाहिए. सीएसएस ऐनिमेशन, टेक्स्ट के इंटरैक्शन की स्टाइल को बदल सकते हैं.

वेब को सुंदर बनाना!

अलग-अलग स्टाइल, जैसे कि वज़न

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

ये उदाहरण इसे काम करते हुए दिखाते हैं.

फ़ॉन्ट	अनुरोध
क्रिमसन प्रो (डिफ़ॉल्ट)	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
क्रिमसन प्रो बोल्ड	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
क्रिमसन प्रो रेगुलर और बोल्ड	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
क्रिमसन प्रो बोल्ड और बोल्ड इटैलिक	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

Google फ़ॉन्ट में हर फ़ॉन्ट फ़ैमिली के लिए उपलब्ध सभी शैलियां हैं.

डिफ़ॉल्ट स्टाइल

जब कोई अनुरोध किसी अक्ष के लिए कोई स्थिति या श्रेणी तय नहीं करता है, तो डिफ़ॉल्ट स्थिति का इस्तेमाल किया जाएगा. इटैलिक ऐक्सिस की डिफ़ॉल्ट स्थिति 0 (सामान्य) और वज़न ऐक्सिस के लिए डिफ़ॉल्ट जगह 400 (सामान्य) होती है.

जिन परिवारों में अक्षों के लिए डिफ़ॉल्ट जगह नहीं है, उनके लिए अनुरोध नहीं किए जा सकते. उदाहरण के लिए, 500 से 900 तक की वज़न की धुरी वाले परिवार का अनुरोध करते समय, वज़न की स्थिति बताई जानी चाहिए.

गैर-मानक वज़न

स्टैटिक फ़ॉन्ट के साथ, वज़न की शैलियों को आम तौर पर 100 के गुणांकों में बताया जाता है (उदा. 300, 400, 700). वैरिएबल फ़ॉन्ट, स्टैंडर्ड वेट और इंटरमीडिएट वेट, दोनों की सुविधा देते हैं. कोई इंटरमीडिएट वज़न रेंडर करने के लिए:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

ऐसा लगता है कि आपके ब्राउज़र में वैरिएबल फ़ॉन्ट काम नहीं करते हैं (कैनियूज़). फ़ॉन्ट बदलने की सुविधा वाले ब्राउज़र पर, इस टेक्स्ट को 400, 450, और 500 की विज़ुअल तौर पर अलग-अलग मोटाई वाले क्रिमसन प्रो को रेंडर करना चाहिए.

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

वेब को सुंदर बनाना!

इंतज़ार के समय और फ़ाइल के साइज़ के हिसाब से ऑप्टिमाइज़ करना

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

फ़ॉन्ट-डिसप्ले का इस्तेमाल

फ़ॉन्ट-डिसप्ले प्रॉपर्टी से आप यह कंट्रोल कर सकते हैं कि फ़ॉन्ट अब भी लोड होते समय या उपलब्ध नहीं होने पर क्या होगा. डिफ़ॉल्ट auto के अलावा कोई दूसरी वैल्यू तय करना आम तौर पर सही होता है.

display पैरामीटर में मनचाहे मान को पास करें:

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

आपके फ़ॉन्ट अनुरोधों को ऑप्टिमाइज़ करना

अक्सर, जब आप अपनी साइट या ऐप्लिकेशन पर वेब फ़ॉन्ट का इस्तेमाल करना चाहते हैं, तब आपको पहले से पता होता है कि आपको कौनसे अक्षरों की ज़रूरत है. ऐसा अक्सर तब होता है, जब लोगो या शीर्षक में वेब फ़ॉन्ट का इस्तेमाल किया जाता है.

इन मामलों में, आपको अपने फ़ॉन्ट अनुरोध यूआरएल में text= वैल्यू तय करने के बारे में सोचना चाहिए. ऐसा करने पर, Google फ़ॉन्ट आपके फ़ॉन्ट के लिए ऑप्टिमाइज़ की गई फ़ाइल दिखाता है. कुछ मामलों में, फ़ॉन्ट फ़ाइल का साइज़ 90% तक कम हो जाता है.

इस सुविधा का इस्तेमाल करने के लिए, बस अपने एपीआई अनुरोध में text= जोड़ें. उदाहरण के लिए, अगर आप ब्लॉग के शीर्षक के लिए सिर्फ़ Inconsolata का इस्तेमाल कर रहे हैं, तो आप शीर्षक को text= की वैल्यू के तौर पर रखें. अनुरोध कुछ इस तरह दिखेगा:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

सभी क्वेरी स्ट्रिंग की तरह ही, आपको यूआरएल को कोड में बदलना होगा:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

यह सुविधा, अंतरराष्ट्रीय फ़ॉन्ट पर भी काम करती है. इससे, UTF-8 वर्णों के बारे में बताया जा सकता है. उदाहरण के लिए, ¡Hola! को इस तरह दिखाया जाता है:

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

कृपया ध्यान दें कि 'text=' पैरामीटर सिर्फ़ एक बार बताया जा सकता है. यह अनुरोध करने वाले सभी परिवारों पर लागू होता है. अगर आपको एक से ज़्यादा फ़ैमिली के लिए अलग-अलग टेक्स्ट ऑप्टिमाइज़ेशन की ज़रूरत है, तो कृपया अलग-अलग एपीआई अनुरोधों का इस्तेमाल करें.

एपीआई यूआरएल बनाना

सख्ती

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

सामान्य दिशा-निर्देश:

अक्षों को अंग्रेज़ी वर्णमाला के क्रम में रखें (en-US स्थान-भाषा)
ऐक्सिस वैल्यू ग्रुप (जैसे कि ट्यूल) को अंकों में क्रम से लगाना ज़रूरी है
बैंगनी ओवरलैप या छू नहीं सकते (जैसे wght 400..500 और 500..600)

एपीआई के यूआरएल की खास बातें

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name: फ़ॉन्ट फ़ैमिली का नाम

axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis: किसी ऐक्सिस टैग, जैसे कि ital, wdth, wght

axis_tuple_list: <axis_tuple>[;<axis_tuple>...]

axis_tuple: <value>[,<value>...] // Same length as axis_tag_list

value: <range> | <float>

range: <float>..<float>

float: ऐक्सिस की रेंज में वैल्यू

text: वह टेक्स्ट जिसे अनुरोध किए गए टाइपफ़ेस में दिखाया जाएगा

display: auto | block | swap | fallback | optional

लेगसी ब्राउज़र के लिए सपोर्ट

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

प्रोग्रेसिव एन्हैंसमेंट अपनाकर, उन पुराने ब्राउज़र में होने वाले अनचाहे व्यवहार से बचा जा सकता है. वैरिएबल फ़ॉन्ट सुविधाओं को गेट करने के लिए, अपने सीएसएस में @supports क्वेरी का इस्तेमाल करें.

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * {
    font-family: 'Markazi Text';
    font-weight: 400;
  }

  @supports (font-variation-settings: "wght" 450) {
    * {
      font-family: 'Markazi Text';
      font-weight: 450;
    }
  }
</style>

सीएसएस अनुरोध Markazi+Text:wght@450, ऐसे क्लाइंट को वैरिएबल 450 भेजता है जो वैरिएबल फ़ॉन्ट के साथ काम नहीं करते और 400 और 500 वज़न उन क्लाइंट को भेजते हैं जो ऐसा नहीं करते. आम तौर पर, आपके अनुरोध की रेंज के हिसाब से फ़ॉलबैक, पुराने ब्राउज़र में उपलब्ध होंगे.

ऐक्सिस	फ़ॉलबैक
`ital`	0, 1 से
`wght`	100, 200, 300, 400, 500, 600, 700, 800, 900 को शामिल करें

इन उदाहरणों में बताया गया है कि कुछ अलग-अलग अनुरोधों के लिए लेगसी ब्राउज़र पर कौनसी स्टाइल उपलब्ध होंगी.

अनुरोध	लेगसी ब्राउज़र पर स्टाइल उपलब्ध हैं
`ital@0`	`ital@0`
`wght@500`	`wght@500`
`wght@432`	`wght@400;500`
`wght@440..560`	`wght@400;500;600`

उपलब्ध वैरिएबल फ़ॉन्ट

v2 एपीआई में उपलब्ध वैरिएबल फ़ॉन्ट की टेबल यहां मिल सकती है.

इसके बारे में और पढ़ें

Google Fonts एपीआई की मदद से, Google फ़ॉन्ट पर उपलब्ध फ़ॉन्ट फ़ैमिली की पूरी सूची देखें.
Google Fonts एपीआई के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, तकनीकी विचार पेज देखें.