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

CSS API का अपडेट

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

नया क्या है

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

https://fonts.googleapis.com/css2

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

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

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

<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>

फ़ाइल खोलने के लिए ब्राउज़र का उपयोग करके, पृष्ठ को यह टेक्स्ट रेंडर करना चाहिए, “वेब Web सुंदर”, Crimson Pro फ़ॉन्ट में.

वेब को खूबसूरत बनाएं!

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

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

उदाहरण के लिए, फ़ॉन्ट का अनुरोध करने के लिए Crimson Pro और Literata:

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

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

<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>

फ़ाइल को खोलने के लिए किसी ब्राउज़र का इस्तेमाल करके, पेज को “मेकिंग द वेब ब्यूटीफ़ुल” टेक्स्ट को रेंडर करना होगा. यह टेक्स्ट पहले Crimson Pro में और फिर Literata में होना चाहिए.

वेब को खूबसूरत बनाएं!

ऐक्सिस रेंज

वैरिएबल फ़ॉन्ट के लिए स्टाइल की लगातार रेंज उपलब्ध होती हैं. आम तौर पर, इनमें अलग से कोई स्टाइल नहीं होती इंतज़ार का समय. यह रिस्पॉन्सिव डिज़ाइन के हिसाब से होता है. इस डाइनैमिक टाइपोग्राफ़ी में स्टाइल की लगातार रेंज इस्तेमाल की जाती हैं. इसमें वे सभी एक पेज पर 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`
Crimson Pro बोल्ड इटैलिक ऐंड [`wght 200-900`]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

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

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

वेब को खूबसूरत बनाएं!

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

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

इन उदाहरणों में इसका उदाहरण दिया गया है.

फ़ॉन्ट	अनुरोध
Crimson Pro (डिफ़ॉल्ट)	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
क्रिमज़न प्रो बोल्ड	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
Crimson Pro रेगुलर और बोल्ड करें	`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 Fonts में हर फ़ॉन्ट फ़ैमिली के लिए उपलब्ध सभी स्टाइल की सूची होती है.

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

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

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

गैर-मानक भार

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

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

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

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

वेब को खूबसूरत बनाएं!

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

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

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

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

display पैरामीटर में वह वैल्यू पास करें जो आपको चाहिए:

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

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

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

इन मामलों में, आपको अपने फ़ॉन्ट में text= वैल्यू तय करनी चाहिए अनुरोध URL है. इससे Google Fonts, ऐसी फ़ॉन्ट फ़ाइल वापस कर सकते हैं जिसे ऑप्टिमाइज़ किया गया है आपका अनुरोध. कुछ मामलों में, इससे फ़ॉन्ट फ़ाइल का आकार इतना कम किया जा सकता है 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=' पैरामीटर सिर्फ़ एक बार तय किया जा सकता है. यह लागू होता है सभी परिवारों के लिए उपलब्ध हो. अगर आपको ज़रूरत हो, तो कृपया अलग से एपीआई अनुरोधों का इस्तेमाल करें कई फ़ैमिली के लिए अलग-अलग टेक्स्ट ऑप्टिमाइज़ेशन की सुविधा.

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

सख़्ती

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

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

ऐक्सिस को अंग्रेज़ी वर्णमाला के क्रम में दिखाएं (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 का इस्तेमाल करें वैरिएबल फ़ॉन्ट सुविधाओं को गेट करने के लिए आपके सीएसएस में क्वेरी शामिल हैं.

इस उदाहरण में, हम Markazi टेक्स्ट के वज़न 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 API में उपलब्ध वैरिएबल फ़ॉन्ट की टेबल यहां दी गई है.

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

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