मैं किसी वेबसाइट पर Google के रोबोटो फ़ॉन्ट का उपयोग कैसे कर सकता हूं?

Question

मैं अपनी वेबसाइट पर Google के रोबोटो फ़ॉन्ट का उपयोग करना चाहता हूं और मैं इस ट्यूटोरियल का अनुसरण कर रहा हूं:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

मैंने उस फ़ाइल को डाउनलोड किया है जिसमें एक फ़ोल्डर संरचना है जैसे:

अब मेरे तीन सवाल हैं:

1. मेरे media/css/main.cssurl में css है । तो मुझे उस फ़ोल्डर को कहां रखना है?
2. क्या मुझे सभी सब फ़ोल्डर से सभी ईओटी, एसवीजी आदि को निकालने और fontsफ़ोल्डर में डालने की आवश्यकता है ?
3. क्या मुझे सीएसएस फ़ाइल फोंट बनाने की जरूरत है। एस सी एस और मेरे बेस टेम्प्लेट फाइल में शामिल हैं?

वह जिस उदाहरण का उपयोग करता है

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

मेरे url को कैसा दिखना चाहिए, अगर मैं चाहता हूं कि dir संरचना की तरह है:

/media/fonts/roboto

Answer 1

आपको वास्तव में इसमें से कोई भी करने की आवश्यकता नहीं है।

• Google के वेब फ़ॉन्ट्स पेज पर जाएँ
• के लिए खोज Robotoऊपरी दाएँ भाग में खोज बॉक्स में
• उस फ़ॉन्ट के वेरिएंट का चयन करें जिसका आप उपयोग करना चाहते हैं
• शीर्ष पर 'इस फ़ॉन्ट का चयन करें' पर क्लिक करें और उन वज़न और वर्ण सेटों का चयन करें जिनकी आपको ज़रूरत है।

पृष्ठ आपको <link>अपने पृष्ठों में शामिल करने के लिए एक तत्व देगा , और font-familyआपके सीएसएस में उपयोग करने के लिए नमूना नियमों की एक सूची ।

Google के फोंट का उपयोग इस तरह से उपलब्धता की गारंटी देता है, और अपने स्वयं के सर्वर से बैंडविड्थ को कम करता है।

Comments

इसके लिए धन्यवाद, यह एकदम सही था। क्या आप जानते हैं कि Google play store में उनकी प्लेलिस्ट के लिए कौन-सा Google उपयोग सेट करता है। मैं बिल्कुल वैसा ही स्टाइल करना चाहता हूं। इसके अलावा मुझे लिंक या कोड स्निपेट लिंक में नहीं मिला। मैं वहाँ फोंट देखते हैं, लेकिन कोई कोड नहीं

— user26

अच्छी बात है, वे कम फ़ाइलों के लिए एक @import भी प्रदान करते हैं! हालाँकि, w / o इंटरनेट कनेक्शन या Google कनेक्शन के मुद्दों का परीक्षण करना (जैसे: चीन) = NO फ़ॉन्ट्स ... मैंने यह भी देखा कि कोई रोबोटो ब्लैक (रोबोटो बीके) नहीं है font-family: वे वास्तव में केवल 3 फ़ॉन्ट परिवारों (रोबोटो, रोबोटो कॉन्डर्ड और का उपयोग करते हैं) रोबोटो स्लैब) अन्य सभी रोबोटो वेरिएंट के माध्यम से font-styleऔर font-weightसीएसएस परिवर्तन किए जाते हैं। इसलिए आदर्श रूप से, Google <link>चेक रखने के बाद कि क्या फोंट वास्तव में हैं। यदि नहीं, तो अपना स्वयं का उपयोग करें (एक फ़ॉन्ट परिवार से सभी फ़ाइलों को लोड करना सामान्य रूप से 0.5 एमबी से अधिक नहीं है)।

— आर्मफूट

@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>यह सभी शैलियों को केवल एक फ़ॉन्ट-परिवार से लोड करता है: रोबोटो। हालाँकि, अगर आपको एक फ़ॉन्ट परिवार की आवश्यकता है, जो Google फ़ॉन्ट्स में नहीं है (जैसे कि रोबोटो ब्लैक ) तो आपको अपने फ़ोल्डरों पर फ़ाइलों की आवश्यकता है और उदाहरण कोड की प्रतिलिपि बनाएँ जो आपने हमें अपने प्रश्न में अपने main.css (इस @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.तरह या जैसा मैंने सुझाव दिया है) में कॉपी करें मेरा जवाब)।

— आर्मफूट

-1 के लिए Using Google's fonts this way guaranties availability। कुछ भी नहीं "उपलब्धता की गारंटी देता है," बहुत कम Google फोंट। मैं बिलियन + लोगों में से एक हूं, जिनके लिए Google की CDN का उपयोग करने का मतलब है कि बहुत सारी वेबसाइटें ठीक से लोड नहीं हो पा रही हैं, या बिल्कुल भी नहीं। मैं किसी को नहीं बता रहा हूं कि क्या करना है, लेकिन यह मत सोचो कि Google का CDN एक सही समाधान है।

— नटोमामी

-1। जैसा कि @Nateowami ने उल्लेख किया है, आप Google के सर्वरों पर भरोसा कर रहे हैं (जो कुछ देशों में अवरुद्ध हो सकते हैं), यह गोपनीयता के लिए बुरा है , और प्रदर्शन वास्तव में बेहतर हो सकता है यदि आप अपने फॉन्ट को स्वयं CDN पर होस्ट करते हैं। यह अधिक काम है लेकिन यह आपका काम है, है ना?

— रॉबिन मेट्रल

Answer 2

ऐसे दो दृष्टिकोण हैं जिन्हें आप अपने पृष्ठों पर लाइसेंस प्राप्त वेब-फोंट का उपयोग करने के लिए ले सकते हैं:

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

   JS फ़ॉन्ट लोडर जैसे कि Google और Typekit (यानी WebFont लोडर) द्वारा उपयोग किया जाता है, सीएसएस क्लासेस और कॉलबैक प्रदान करता है ताकि फॉन्ट को डाउनलोड करने में मदद मिल सके, या फॉन्ट डाउनलोड करते समय प्रतिक्रियाएं मिल सकें ।

   <head>
     <!-- get the required files from 3rd party sources -->
     <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
   
     <!-- use the font -->
     <style>
       body {
         font-family: 'Roboto', sans-serif;
         font-size: 48px;
       }
     </style>
   </head>

2. DIY दृष्टिकोण में वेब उपयोग के लिए लाइसेंस प्राप्त एक फ़ॉन्ट शामिल है, और वैकल्पिक रूप से अपने फ़ाइल आकार को अनुकूलित करने के लिए FontSquirrel के जनरेटर (या कुछ सॉफ़्टवेयर) जैसे उपकरण का उपयोग किया जाता है। फिर, @font-faceफॉन्ट (एस) को सक्षम करने के लिए मानक सीएसएस संपत्ति के क्रॉस-ब्राउज़र कार्यान्वयन का उपयोग किया जाता है।

   यह दृष्टिकोण बेहतर लोड प्रदर्शन प्रदान कर सकता है क्योंकि आपके पास वर्णों पर अधिक दानेदार नियंत्रण शामिल है और इसलिए फ़ाइल-आकार।

   /* get the required local files */
   @font-face {
     font-family: 'Roboto';
     src: url('roboto.eot'); /* IE9 Compat Modes */
     src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('roboto.woff') format('woff'), /* Modern Browsers */
     url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
   }
   
   /* use the font */
   body {
     font-family: 'Roboto', sans-serif;
     font-size: 48px;
   }

कहानी संक्षिप्त में:

@ फॉन्ट-फेस घोषणा के साथ फ़ॉन्ट होस्टिंग सेवाओं का उपयोग करना समग्र प्रदर्शन, अनुकूलता और उपलब्धता के संबंध में सर्वश्रेष्ठ आउटपुट देता है।

स्रोत: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

---

अपडेट करें

रोबोटो: Google का सिग्नेचर फॉन्ट अब ओपन सोर्स है

अब आप यहां मिलने वाले निर्देशों का उपयोग करके मैन्युअल रूप से रोबोटो फोंट उत्पन्न कर सकते हैं ।

Answer 3

पुरानी पोस्ट, मुझे पता है।

सीएसएस का उपयोग करना भी संभव है @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}

Comments

आपका समाधान एक प्रदर्शन विरोधी पैटर्न है। @Import की तुलना में Google की CSS फ़ाइल के जल्द डाउनलोड होने पर आपके मार्कअप में लिंक टैग का उपयोग करना; ब्राउज़र पहले सामान्य रूप से और विशेष रूप से प्री-लोडर (HTML को पार्स करते समय, HTML को पहले पार्स करते समय) के कारण संसाधन संदर्भ को पहले ही पता कर लेता है, फिर अपनी CSS फ़ाइल की खोज करता है, फिर उसे डाउनलोड करता है, फिर पार्स करता है और @import की खोज करता है, फिर आयातित स्टाइलशीट डाउनलोड करें)।

— राडोको दिनेव

जरुरी नहीं। Webpack और प्लगइन्स का उपयोग करना, यह सब आपके वितरण बिल्ड में एम्बेड किया जाएगा।

— Spock

Answer 4

srcफ़ॉन्ट फ़ाइलों को सीधे संदर्भित करता है, इसलिए यदि आप उन सभी जगह पर /media/fonts/robotoआप इस तरह अपने main.css में उन्हें देखना चाहिए: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..एक फ़ोल्डर ऊपर चला जाता है, जिसका अर्थ है आप की बात कर रहे हैं mediaफ़ोल्डर यदि main.css में है /media/cssफ़ोल्डर।

आपको ../fonts/roboto/सीएसएस में सभी यूआरएल संदर्भों में उपयोग करना होगा (और सुनिश्चित करें कि फाइलें इस फ़ोल्डर में हैं और उपनिर्देशिकाओं में नहीं हैं, जैसे कि roboto_black_macroman)।

मूल रूप से (आपके प्रश्नों का उत्तर):

मेरे मीडिया में css / css / main.css url है। तो मुझे उस फोल्डर को कहां रखना है

आप इसे वहां छोड़ सकते हैं, लेकिन उपयोग करना सुनिश्चित करें src: url('../fonts/roboto/

क्या मुझे सभी सब फ़ोल्डर से सभी ईओटी, एसवीजी आदि को निकालने और फोंट फ़ोल्डर में डालने की आवश्यकता है

यदि आप उन फाइलों को सीधे (अपने सीएसएस कोड में उपनिर्देशिका रखे बिना) संदर्भित करना चाहते हैं, तो हाँ।

क्या मुझे सीएसएस फ़ाइल फोंट बनाने की जरूरत है। मेरे आधार टेम्पलेट फ़ाइल में शामिल हैं

जरूरी नहीं कि आप उस कोड को अपने main.css में शामिल कर सकें। लेकिन अपने अनुकूलित सीएसएस से फोंट को अलग करने के लिए यह एक अच्छा अभ्यास है।

यहाँ एक फोंट LESS / CSS फ़ाइल का उपयोग किया गया है, जिसका एक उदाहरण है:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(इस उदाहरण में मैं केवल ttf का उपयोग कर रहा हूं) तब मैं @import "fonts";अपनी main.less फ़ाइल का उपयोग करता हूं ( कम सीएसएस प्रीप्रोसेसर है, यह इस तरह की चीजों को थोड़ा आसान बनाता है )

Answer 5

यह वही है जो मैंने woff2 फ़ाइलों को प्राप्त करने के लिए किया था जिन्हें मैं एक सीडीएन का उपयोग किए बिना स्थिर तैनाती के लिए चाहता था

TEMPORARILY क्रोसोटो फोंट को इंडेक्स में लोड करने के लिए css के लिए cdn जोड़ें और पेज को लोड होने दें। Google देव टूल से स्रोतों को देखें और फोंट .googleapis.com नोड का विस्तार करें और सीडीआर की सामग्री देखें। परिवार = रोबोटो: 300,400,500 और प्रदर्शन = स्वैप फ़ाइल और सामग्री की प्रतिलिपि बनाएँ। इस सामग्री को अपनी संपत्ति निर्देशिका में एक सीएसएस फ़ाइल में रखें।

सीएसएस फ़ाइल में, सभी ग्रीक, क्रायलिक और शटल सामान हटा दें।

इस css फ़ाइल की पंक्तियों को देखें जो इसके समान हैं:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

लिंक पते को कॉपी करें और अपने ब्राउज़र में पेस्ट करें, यह फ़ॉन्ट डाउनलोड करेगा। इस फॉन्ट को अपने एसेट फोल्डर में डालें और नाम बदलें, साथ ही साथ सीएसएस फाइल में भी। अन्य लिंक पर जाएं, मेरे पास 6 अद्वितीय woff2 फाइलें थीं।

मैंने सामग्री आइकन के लिए समान चरणों का पालन किया।

अब वापस जाएं और उस पंक्ति पर टिप्पणी करें जहां आप सीडीएन कहते हैं और इसके बजाय आपके द्वारा बनाई गई नई सीएसएस फ़ाइल का उपयोग करें।

Answer 6

इसे इस्तेमाल करे

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>

Answer 7

अपनी CSS स्टाइलशीट में फ़ॉन्ट प्रकार नाम से पहले / फोंट / या / फॉन्ट का प्रयोग करें । मैं इस त्रुटि का सामना कर रहा हूं लेकिन इसके बाद काम करना ठीक है।

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 8

वेबसाइट के लिए आप नीचे दिए अनुसार 'रोबोटो' फ़ॉन्ट का उपयोग कर सकते हैं:

यदि आपने अलग सीएसएस फ़ाइल बनाई है तो नीचे दी गई लाइन को सीएसएस फ़ाइल के शीर्ष पर रखें:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

या यदि आप अलग फाइल नहीं बनाना चाहते हैं तो बीच में ऊपर की लाइन जोड़ें <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

फिर:

html, body {
    font-family: 'Roboto', sans-serif;
}

Answer 9

क्या आपने उस zip फ़ाइल में How_To_Use_Webfonts.html पढ़ा है?

इसे पढ़ने के बाद, ऐसा लगता है कि प्रत्येक फ़ॉन्ट सबफ़ोल्डर में एक पहले से ही बनाया गया है। वहाँ है कि आप इसे शामिल करके उपयोग कर सकते हैं:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Answer 10

यह आसान है

आपके द्वारा डाउनलोड किए गए प्रत्येक फ़ोल्डर में एक अलग तरह का रोबो फॉन्ट है, इसका मतलब है कि वे अलग-अलग फॉन्ट हैं

उदाहरण: "रोबोटो_ अनियमित_मैक्रोमन"

उनमें से किसी का उपयोग करने के लिए:

1- आप जिस फॉन्ट का इस्तेमाल करना चाहते हैं उसका फोल्डर निकालें

2- इसे css फाइल के पास अपलोड करें

3- अब इसे css फाइल में शामिल करें

"रॉबोटो_ अनियमित_मैक्रोमन" नामक फ़ॉन्ट को शामिल करने के लिए उदाहरण:

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

फ़ाइलों के पथ के लिए देखें, यहाँ मैंने फ़ोल्डर को "roboto_ अनियमित_macroman" अपलोड किया है उसी फ़ोल्डर में जहाँ css है

तब आप अब टाइप करके फ़ॉन्ट का उपयोग कर सकते हैं font-family: 'Roboto';

Answer 11

यह वास्तव में काफी सरल है। Google की वेबसाइट पर फ़ॉन्ट पर जाएं, और हर उस पृष्ठ के प्रमुख पर अपना लिंक जोड़ें जिसे आप फ़ॉन्ट शामिल करना चाहते हैं।

Answer 12

एक घंटे बिताए, फ़ॉन्ट मुद्दों को ठीक करना।

संबंधित जवाब - नीचे React.jsवेबसाइट के लिए है:

1. एनपीएम मॉड्यूल स्थापित करें:

   npm install --save typeface-roboto-mono

2. 
   नीचे दिए गए किसी एक का उपयोग करने के लिए .js फ़ाइल आयात करें :

   import "typeface-roboto-mono"; // अगर आयात समर्थित है
   require('typeface-roboto-mono') // अगर आयात समर्थित नहीं है

3. नीचे दिए गए तत्वों में से एक का उपयोग कर सकते हैं
   :

   fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

उम्मीद है की वो मदद करदे।