Google फ़ॉन्ट डाउनलोड करना और उसका उपयोग करने वाली ऑफ़लाइन साइट सेट करना

Question

मेरे पास एक टेम्प्लेट है और इसमें इस तरह एक Google फ़ॉन्ट का संदर्भ है:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

मैं इसे कैसे डाउनलोड कर सकता हूं और इसे अपने पृष्ठों में उपयोग करने के लिए सेट कर सकता हूं जो हर समय ऑफ़लाइन चल रहे हैं?

Answer 1

बस Google फ़ॉन्ट्स - http://www.google.com/fonts/ पर जाएं , अपने संग्रह में अपने इच्छित फ़ॉन्ट जोड़ें और डाउनलोड बटन दबाएं। और फिर बस इस फ़ॉन्ट को अपने वेब पेज से जोड़ने के लिए @fontface का उपयोग करें। Btw, यदि आप उपयोग किए जा रहे लिंक को खोलते हैं, तो आपको @fontface का उपयोग करने का एक उदाहरण दिखाई देगा

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

एक उदाहरण के लिए

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

बस फ़ॉन्ट फ़ाइल पर स्थानीय लिंक के लिए url पता बदलें, आपने डाउनलोड किया है।

आप इसे और भी आसान कर सकते हैं।

बस फ़ाइल डाउनलोड करें, आपने लिंक किया है:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

नाम यह खुलता है। एस या तो।

तो बस अपने पथ में फ़ॉन्ट फ़ाइलों के लिए url () में लिंक बदलें।

और उसके बाद अपने उदाहरण स्ट्रिंग को बदलें:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Comments

मुझे अभी भी नहीं मिला

— user2147954

Google द्वारा सर्वर के समय Google फोंट के विपरीत, यह दृष्टिकोण अकेले WOFF प्रारूप पर निर्भर करता है और इस प्रकार अनिवार्य रूप से अधिक सीमित है। इसके अलावा, Google अपने फोंट को TTF प्रारूप में वितरित करता है, न कि WOFF में।

— जुक्का के। कोर्पेला

सावधान रहें, फोंट .googleapis विभिन्न ब्राउज़रों के लिए अलग-अलग @ फॉन्ट-फेस घोषणाएं उत्पन्न करते हैं।

— Hüseyin Yağlı

यह सही नहीं है क्योंकि Google, फोंट.गोओगैपिसिस . com/ से एक ब्राउज़र-विशिष्ट सीएसएस फ़ाइल भेजता है। इसलिए यदि आप क्रोम के साथ इसे खोलते हैं, तो आपको IE या किसी अन्य ब्राउज़र के साथ इसे खोलने से एक अलग @ फ़ॉन्ट-चेहरा मिलेगा। उदाहरण के लिए WOFF2 फोंट केवल फ़ायरफ़ॉक्स और क्रोम को भेजे जाएंगे क्योंकि अन्य ब्राउज़र उन्हें (अभी तक) समर्थन नहीं करते हैं। caniuse.com/#feat=woff2

— जोस्ट वैन डेर

स्वीकृत स्थिति की परवाह किए बिना इस उत्तर को अनदेखा करें। यह गलत है क्योंकि जोस्ट वान डेर लान ने यहां बताया है। नीचे @ मार्को-केर्वित्ज द्वारा उच्च स्कोर वाला उत्तर देखें, जिसे सही उत्तर के रूप में चिह्नित किया जाना चाहिए।

— ऐपिस्टिस्ट - पॉल डब्ल्यू

Answer 2

Google webfonts सहायक की जाँच करें

यह आपको Google के हर वेब फ़ॉन्ट को डाउनलोड करने देता है और कार्यान्वयन के लिए सीएसएस कोड सुझाता है। यह टूल आपको बिना किसी परेशानी के बस सभी फॉर्मेट को डाउनलोड करने की सुविधा देता है।

कभी जानना चाहते हैं कि Google अपने वेबफोन्स को कहां होस्ट करता है? यदि आप सभी .eot, .woff, .woff2, .svg, .ttf फ़ाइलों को सीधे Google से एक फ़ॉन्ट संस्करण की डाउनलोड करना चाहते हैं (आमतौर पर आपका उपयोगकर्ता-एजेंट सबसे अच्छा प्रारूप निर्धारित करेगा)।

उनके गितुब पृष्ठ पर एक नज़र डालें ।

Comments

मुझे आश्चर्य है कि पहली जगह में Google ने ऐसा क्यों नहीं किया? +1

— tftd

यह बहुत अच्छा काम करता है, यह सुनिश्चित करें कि आप स्थानीय फ़ाइल से लिंक करते समय संबंधित सामग्री प्रकार की घोषणा करते हैंContent-type: text/css; charset: UTF-8

— क्लेन डीसिल्वा

यदि आप वेबपैक या कुछ अन्य टूल का उपयोग कर रहे हैं जो CSS / SASS आयात को पैक करता है तो यह दृष्टिकोण सबसे अच्छा है। यह सवाल प्रक्रिया को थोड़ा और विस्तार से बताता है।

— पेस

संकेत के लिए बहुत बहुत धन्यवाद। मेरा दिन बचाया!

— evnica

वन-लाइनर , टारगेट डायरेक्टरी में चलते हैं:curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip

— smnbbrv

Answer 3

इसे प्राप्त करने के लिए चरण-दर-चरण तरीका मिला (1 फ़ॉन्ट के लिए):
( सितम्बर -9 2013 के अनुसार )

1. Http://www.google.com/fonts पर अपना फ़ॉन्ट चुनें
2. "संग्रह में जोड़ें" नीले बटन का उपयोग करके अपने संग्रह में वांछित एक जोड़ें
3. "संग्रह से निकालें" बटन के पास "सभी शैलियाँ देखें" बटन पर क्लिक करें और सुनिश्चित करें कि आपने अन्य शैलियों का चयन किया है जिन्हें आपको "बोल्ड" जैसी भी आवश्यकता हो सकती है ...
4. पृष्ठ के नीचे दाईं ओर स्थित 'उपयोग' टैब बटन पर क्लिक करें
5. नीचे तीर छवि के साथ शीर्ष पर डाउनलोड बटन पर क्लिक करें
6. दिखाई देने वाले पॉपअप संदेश पर "ज़िप फ़ाइल" पर क्लिक करें
7. पॉपअप पर "बंद करें" बटन पर क्लिक करें
8. पेज को धीरे-धीरे स्क्रॉल करें जब तक कि आप 3 टैब "स्टैंडड | @import | जावास्क्रिप्ट" न देखें
9. "@Import" टैब पर क्लिक करें
10. का चयन करें और यूआरएल कॉपी के बीच 'url('और')'
11. इसे एक नए टैब में एड्रेस बार पर कॉपी करें और वहां जाएं
12. "फ़ाइल> पृष्ठ को इस रूप में सहेजें ..." करें और इसे "वांछितfontname.css" नाम दें (तदनुसार बदलें)
13. आपके द्वारा डाउनलोड किए गए फोंट .zip फ़ाइल को नीचे करें (.ttf निकाला जाना चाहिए)
14. " Http://ttf2woff.com/ " पर जाएं और ज़िप से निकाले गए किसी भी .ttf को .woff में बदलें
15. संपादित करें desiredfontname.cssऔर उसके भीतर किसी भी यूआरएल को बदलें [ इसी बीच ] 'url('और ')'इसी परिवर्तित .woff फ़ाइल के साथ आपको ttf2woff.com; आपके द्वारा लिखा गया पथ आपके सर्वर doc_root के अनुसार होना चाहिए
16. फ़ाइल को सहेजें और इसे अपने अंतिम स्थान पर ले जाएं और <link/>इन्हें अपने HTML पृष्ठ में आयात करने के लिए संबंधित CSS टैग लिखें
17. अब से, font-familyअपनी शैली में इसके नाम से इस फ़ॉन्ट को देखें

बस। क्योंकि मुझे वही समस्या थी और शीर्ष पर समाधान मेरे लिए काम नहीं करता था।

Comments

इन चरणों ने पूरी तरह से काम किया। मैं सिर्फ यह सुनिश्चित करने के लिए कि अभी तक woff फ़ाइल एक्सटेंशन का उपयोग नहीं करने वालों को जोड़ना चाहता हूं और web.config में उस mimetype को जोड़ना चाहता हूं।

— कोडिंग 101

कोई कनवर्टर की जरूरत है। मार्को केरविट्ज़ के उत्तर को देखें।

— Herr_Schwabullek

Answer 4

अन्य उत्तर गलत नहीं हैं, लेकिन मुझे यह सबसे तेज़ तरीका लगा।

1. Google फोंट से ज़िप फ़ाइल डाउनलोड करें और इसे अनज़िप करें।
2. एक समय में फॉन्ट फाइल 3 को http://www.fontsquirrel.com/tools/webfont-generator पर अपलोड करें
3. परिणाम डाउनलोड करें।

परिणाम में सभी फ़ॉन्ट प्रारूप होते हैं: woff, svg, ttf, eot ।

और एक अतिरिक्त बोनस के रूप में वे आपके लिए सीएसएस फ़ाइल भी उत्पन्न करते हैं!

Comments

एक उत्तर के लिए +1 जिसके लिए मुझे इसे पढ़ते समय सोचना नहीं पड़ा। उन्हें पहले से अपलोड किए बिना एक सीधा Google फ़ॉन्ट कनवर्टर ढूंढना भयानक होगा। उदाहरण उपयोगिता: ऑफ़लाइन वेबसाइट प्रबंधन करते समय।

— मीटाइ.कॉम

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

— केन सूंग

कोई कनवर्टर की जरूरत है। मार्को केरविट्ज़ के उत्तर को देखें

— Herr_Schwabullek

मैं एक बार में 10 फोंट अपलोड करने में सक्षम था, इसलिए ऐसा लगता है कि 3 फोंट की सीमा को हटा दिया गया है या बढ़ा दिया गया है

— एड्रियन हडले

Answer 5

3 चरण:

1. Goole फ़ॉन्ट्स और डाउन लोड .css फ़ाइल पर अपना कस्टम फ़ॉन्ट डाउनलोड करें: http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 डाउनलोड करें और example.css पर सहेजें
2. आपके द्वारा डाउनलोड की गई फ़ाइल खोलें ( example.css )। अब आपको सभी फॉन्ट-फेस फाइल को डाउनलोड करना होगा और उन्हें फॉन्ट डायरेक्टरी में सेव करना होगा ।
3. Example.css संपादित करें : सभी फ़ॉन्ट-फेस फ़ाइल को अपने .css डाउनलोड में बदलें

उदाहरण के लिए:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

Src को देखें: -> url। Http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 डाउनलोड करें और फोंट डायरेक्टरी में सेव करें । उसके बाद अपने सभी डाउनलोड की गई फ़ाइल में url बदलें। अब ऐसा ही दिखेगा

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** सभी फोंट डाउनलोड करें .css फ़ाइल। आशा है कि यह यू की मदद करेगा

Answer 6

यदि आप अपने पैकेज निर्भरता को स्पष्ट रूप से घोषित करना चाहते हैं या डाउनलोड को स्वचालित करना चाहते हैं, तो आप Google फोंट में खींचने के लिए नोड पैकेज जोड़ सकते हैं और स्थानीय रूप से सेवा कर सकते हैं।

npm - Google फ़ॉन्ट डाउनलोड s

टाइपफेस परियोजना मुक्त स्रोत टाइपफेस के लिए NPM संकुल बनाता है:

एक खुला स्रोत टाइपफेस को स्वयं-होस्ट करने के लिए सभी आवश्यक फोंस और सीएसएस के साथ प्रत्येक पैकेज शिप।
सभी Google फ़ॉन्ट्स को अन्य ओपन सोर्स फोंट की छोटी लेकिन बढ़ती सूची के साथ जोड़ा गया है।

टाइपफेस-रॉबोटो या टाइपफेस-ओपन-संस जैसे उपलब्ध फोंट ब्राउज़ करने और इस तरह स्थापित करने के लिए बस एनपीएम खोजें :typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

npm - Google फ़ॉन्ट्स डाउनलोड- ers

अधिक सामान्य उपयोग के मामले में, कई npm पैकेज हैं जो दो चरणों में फोंट वितरित करेंगे, पहला पैकेज प्राप्त करके, और फिर इसे फ़ॉन्ट नाम और विकल्पों को इंगित करके आप शामिल करना चाहेंगे।

यहाँ कुछ विकल्प दिए गए हैं:

• Google फ़ॉन्ट्स वेबपैक प्लगइन
• Google फ़ॉन्ट्स ऑफ़लाइन
• Google फ़ॉन्ट्स
• Google फ़ॉन्ट्स प्राप्त करें

आगे पढ़ना :

• कैसे सामग्री माउस को ऑफ़लाइन होस्ट करने के लिए?
• इलेक्ट्रॉन ऐप में ऑफ़लाइन सामग्री आइकन और रोबोटो फ़ॉन्ट का उपयोग करना

Answer 7

अनिवार्य रूप से आप अपनी परियोजना में फ़ॉन्ट को शामिल कर रहे हैं।

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Comments

लेख के लिए मृत लिंक

— TecHunter

डाउनलोड .eot फ़ाइल शामिल नहीं है

— exe

Answer 8

Google फ़ॉन्ट्स का उपयोग करते समय, आपका वर्कफ़्लो 3 चरणों में विभाजित होता है: "चुनें", "कस्टमाइज़", "एंबेड"। यदि आप "उपयोग" पृष्ठ के दाईं ओर करीब से देखते हैं, तो एक छोटा तीर है जो आपको अपने संग्रह में वर्तमान में फ़ॉन्ट डाउनलोड करने की अनुमति देता है।

उसके बाद, और एक बार आपके सिस्टम पर फ़ॉन्ट स्थापित हो जाने के बाद, आपको बस इसे font-familyसीएसएस निर्देश का उपयोग करके किसी अन्य नियमित फ़ॉन्ट की तरह उपयोग करना होगा ।

Answer 9

मैंने नीचे दिए गए पायथन कोड का निर्माण करने के लिए ड्यूडब के उत्तर का पालन ​​किया जो इस प्रक्रिया को स्वचालित करता है।

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

आशा है कि यह कॉपी-पेस्ट की मौत में से कुछ के साथ मदद करता है।

Answer 10

आपको फ़ॉन्ट डाउनलोड करने और इसे स्थानीय रूप से संदर्भित करने की आवश्यकता है।

CSSआपके द्वारा पोस्ट किए गए लिंक से डाउनलोड करें , फिर सभी WOFFफ़ाइलों को डाउनलोड करें और (यदि आवश्यक हो) उन्हें कन्वर्ट करें TTF।

फिर CSSस्थानीय रूप से फोंट को शामिल करने के लिए आपके द्वारा पोस्ट किए गए लिंक से बदल दें ।

से

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

सेवा

url(/path/to/font/font.woff)

देखा! आपको कुछ और करने की आवश्यकता हो सकती है लेकिन उपरोक्त मूल बातें हैं। यह लेख थोड़ा बेहतर बताता है।

Comments

डीआईडी ​​वही है लेकिन अन्य पेज विकृत हो रहे हैं। : <लिंक href = "।/ css / font.woff" rel = 'स्टाइलशीट' टाइप = 'टेक्स्ट / सीएसएस'>

— user2147954

अपने फ़ॉन्ट फ़ाइल कहा जाता है font.woff? क्या आपने चेक किया कि फाइल लोड है?

— टेरी

@ मुझे यकीन नहीं है कि आपका क्या मतलब है - यह फ़ाइल के लिए एक काल्पनिक नाम था।

— मैटियोसाइड 550

Answer 11

बस फ़ॉन्ट डाउनलोड करें और इसे एक फ़ोल्डर में निकालें। फिर उस फ़ॉन्ट को लिंक करें। नीचे दिए गए कोड ने मेरे लिए ठीक से काम किया।

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}