अपने स्वयं के सर्वर पर Google वेब फोंट कैसे होस्ट करें?


271

मुझे इंट्रानेट एप्लिकेशन पर कुछ Google फोंट का उपयोग करने की आवश्यकता है। क्लाइंट के पास इंटरनेट कनेक्शन हो सकता है या नहीं। लाइसेंस की शर्तों को पढ़ते हुए, ऐसा प्रतीत होता है कि इसकी कानूनी रूप से अनुमति है।


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

1
आपको लिंक किए गए स्टाइलशीट से सभी यूआरआई मिलते हैं।
fuxia

38
हां, मैं सभी विवरणों को स्वयं समझ सकता हूं, या मैं यह देखने के लिए एक प्रश्न पूछ सकता हूं कि क्या किसी ने पहले किया है और साझा करने के लिए अनुभव और स्क्रिप्ट हैं
समर्थ भार्गव

2
ठीक है, Google fonts.googleapis.com/css?आपके यूए हेडर (पढ़ें: आपका ब्राउज़र) के आधार पर विभिन्न उत्तरों को लौटाता है returns इसलिए वे केवल वही वितरित करते हैं, जो वर्तमान ब्राउज़र की आवश्यकता है। यदि कोई आवश्यक सभी फोंट (या यहां तक ​​कि केवल यूआरएल) प्राप्त करना चाहता है, तो आपको अलग-अलग ब्रोवर्स सम्मान से सीएसएस फ़ाइल के कई भार की आवश्यकता होगी। विभिन्न जाली हेडर के साथ, वह सब प्राप्त करने के लिए जो आवश्यक है।
फ्रैंक नॉक

इस टूल का उपयोग करें: npmjs.com/package/font-ranger
Async

जवाबों:


217

कृपया इस बात का ध्यान रखें कि मेरा उत्तर बहुत पुराना हो चुका है।

नीचे तकनीकी रूप से परिष्कृत उत्तर दिए गए हैं, जैसे:

तो इस तथ्य को न दें कि यह वर्तमान में स्वीकृत उत्तर है जो आपको यह आभास देता है कि यह अभी भी सबसे अच्छा है।


आप अब अपने google / font रिपॉजिटरी में github के माध्यम से google का संपूर्ण फ़ॉन्ट सेट भी डाउनलोड कर सकते हैं । वे अपने फोंट का एक ~ 420 एमबी ज़िप स्नैपशॉट भी प्रदान करते हैं


आप पहले अपने फ़ॉन्ट चयन को ज़िप्ड पैकेज के रूप में डाउनलोड करते हैं, जो आपको सही प्रकार के फोंट का एक गुच्छा प्रदान करता है। उन्हें कहीं भी सार्वजनिक रूप से कॉपी करें, कहीं आप अपने सीएसएस से लिंक कर सकते हैं।

Google webfont डाउनलोड पेज पर, आपको एक शामिल लिंक मिलेगा, जैसे:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

यह फोंट का एक समूह है, जो @font-faceडिफेक्ट के एक समूह के माध्यम से फोंट को परिभाषित करता है ।

इसे अपने खुद के सीएसएस में कॉपी और पेस्ट करने के लिए एक ब्राउज़र में खोलें और दाएं फ़ॉन्ट फ़ाइल और प्रारूप प्रकारों को शामिल करने के लिए यूआरएल को संशोधित करें।

तो यह:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

यह बन जाता है:

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}

जैसा कि आप देख सकते हैं, इस तरह से अपने सिस्टम पर फोंट की मेजबानी करने का एक नकारात्मक पहलू यह है कि आप अपने आप को सही प्रकार के प्रारूप में प्रतिबंधित करते हैं, जबकि एक्सेसिंग डिवाइस द्वारा Google वेबफॉन्ट सेवा निर्धारित करती है कि कौन से प्रारूप प्रसारित किए जाएंगे।

इसके अलावा, मुझे .htaccessक्रोम देव टूल्स में पॉप अप करने से त्रुटियों से बचने के लिए माइम प्रकार के फोंट रखने वाली निर्देशिका में एक फ़ाइल जोड़ना पड़ा ।

इस समाधान के लिए, केवल सच्चे प्रकार की आवश्यकता होती है, लेकिन अधिक परिभाषित करने पर चोट नहीं लगती है जब आप अलग-अलग फोंट को शामिल करना चाहते हैं, जैसे font-awesome

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

37
आप ट्रू टाइप में प्रतिबंधित नहीं हैं, आपको बस .woff फ़ाइलों को डाउनलोड करने की आवश्यकता है, अर्थात। अपने वेब ब्राउज़र में 'http: //themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff' डालें, इसे '/fonts/Contarell-Bold.woff' के रूप में सहेजें और अपडेट करें मैच के लिए सीएसएस (यूआरएल ('/ फोंट / कैंटरेल-बोल्ड.ऑफ'))
एंथनी ब्रिग्स

2
Google द्वारा कई फ़ॉन्ट प्रारूप प्रदान करने का एक कारण है - ट्रू टाइप पुराने ब्राउज़रों पर काम नहीं करता है । WOFF W3C मानक है।
माइकल मैकगिनिस

3
बैश स्क्रिप्ट समाधान के लिए नीचे स्क्रॉल करें - भयानक!
डॉ। मैक्स वोकेल

3
फ़ाइल का उपयोग किए जा रहे ब्राउज़र के आधार पर सामग्री को बदलता है।
क्रिया २ K

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

202

सभी फ़ॉन्ट वेरिएंट को डाउनलोड करने में आपकी मदद करने के लिए एक टूल localfont.com है। यह कार्यान्वयन के लिए संगत सीएसएस उत्पन्न करता है। पदावनत

लोकलफॉन्ट नीचे है। इसके बजाय, जैसा कि डैमिर बताता है , आप google-webfonts- हेल्पर का उपयोग कर सकते हैं



हालांकि शानदार, जब आपको अपने फ़ॉन्ट के अन्य भाषा संस्करणों की आवश्यकता होती है, तो आपको एक और समाधान खोजना होगा
anges244

विभिन्न चरित्र सेट के बारे में क्या?
विट्रो

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

@PauloCoghi टूल रिपोर्ट कर सकता है कि वेबसाइट उपलब्ध है, लेकिन स्पष्ट रूप से कुछ गलत है क्योंकि मैं और कई अन्य इसे देखने में असमर्थ हैं।
वकील

147

महान समाधान google-webfonts- हेल्पर है

यह आपको एक से अधिक फ़ॉन्ट संस्करण का चयन करने की अनुमति देता है, जो बहुत समय बचाता है।


महान उपकरण! मुझे यह पसंद है। आप फ़ॉन्ट पूर्वावलोकन देख सकते हैं और एक क्लिक से सभी आवश्यक फ़ाइलों को डाउनलोड कर सकते हैं।
24'15

बहुत अच्छा उपकरण। बहुत अच्छी तरह से काम करता है और latin-extफोंट भी डाउनलोड करने की अनुमति देता है।
पोट्टरेकक्र

3
यह सबसे अच्छा विकल्प है। यह सब कुछ करता है, आप फ़ॉन्ट फ़ोल्डर उपसर्ग भी निर्दिष्ट कर सकते हैं।
मकीज क्रैस्कीज

63

मैंने एक bash स्क्रिप्ट लिखी है जो विभिन्न उपयोगकर्ता एजेंटों के साथ Google के सर्वर पर CSS फ़ाइल लाती है, विभिन्न फ़ॉन्ट प्रारूपों को एक स्थानीय निर्देशिका में डाउनलोड करती है और उनके सहित एक CSS फ़ाइल लिखती है। ध्यान दें कि स्क्रिप्ट को बैश संस्करण 4.x की आवश्यकता है।

स्क्रिप्ट के लिए https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ देखें (मैं इसे यहां पुन: प्रस्तुत नहीं कर रहा हूं इसलिए मुझे केवल इसे अपडेट करना होगा एक जगह जब मुझे जरूरत हो)।

संपादित करें: https://github.com/neverpanic/google-font-download पर ले जाया गया


4
यह तो अधिक भयानक है! (मुझे आशा है कि यह अच्छी तरह से काम करता है अभी तक परीक्षण नहीं किया गया है)। मैंने वर्षों से समय-समय पर इस फॉर्म की तरह कुछ खोजा। कोई मजाक नहीं, मैंने अपनी स्क्रिप्ट भी लिखना शुरू कर दिया है जो पूरी तरह से दूर है। इसका दिमाग उड़ रहा है कि बहुत कम लोग ऐसा चाहते हैं। Google इस फोंट को उत्पन्न स्ट्रिंग्स के पीछे छिपा रहा है और कोई खुला स्रोत नहीं है वास्तव में केवल ttf के रेपो में webfont फ़ाइलें। वे चाहते हैं कि हम उनके फोंट का उपयोग करें, वे चाहते हैं कि हम उनके सर्वर का उपयोग करें क्योंकि वे लोगों पर नज़र रखने के लिए इसका दुरुपयोग करते हैं। और यहां तक ​​कि सबसे गोपनीयता के बारे में पता है कि लोग googles सर्वर से फोंट एम्बेड करते हैं।
redanimalwar

1
मेरी एकमात्र चिंता वास्तविक फ़ॉन्ट लाइसेंस है, वास्तव में उनका बारीकी से अध्ययन नहीं किया गया है। मुझे पता है कि फ़ॉन्ट लाइसेंस GPL या MIT से अलग है। तो क्या हमें वास्तव में Google सर्वर से इस फोंट को पकड़ने और उन्हें अपने दम पर सर्व करने की अनुमति है? फिर से मुझे एक मिनट के लिए विश्वास नहीं हुआ कि Google दुनिया को बेहतर बनाने के लिए यह सब फोंट दे रहा है, वे वास्तव में उनके लिए खुले फोंट का उत्पादन करने के लिए देवता को भुगतान करते हैं ताकि वे सुनिश्चित करें कि उन्हें कुछ हासिल हो, बहुत सारा डेटा। और अगर इसकी गोपनीयता आपके ऊपर नहीं है, तो आप इस तरह से इंटरनेट के बिना स्थानीय रूप से इस फोंट का परीक्षण कर सकते हैं।
redanimalwar

2
इस उत्तर को और अधिक अपडेट किया जाना चाहिए, क्योंकि यह स्क्रिप्ट localfont.com के विपरीत सभी फोंट प्रारूप और सबसेट डाउनलोड कर सकती है।
पोट्टरेकक्र

मुझे पता है कि आप मुझे एक आलसी व्यक्ति के रूप में लेंगे, लेकिन एक औसत विंडोज़ उपयोगकर्ता के रूप में, यह इसे संकलित करने और इसे उपयोग करने में सक्षम होने के लिए बेकार है ...
लुकास बस्टामांटे

@LucasB इसमें कोई संकलन शामिल नहीं है। यह बैश स्क्रिप्ट है। मुझे पता है कि विंडोज बैश के साथ नहीं आता है, लेकिन बेझिझक इसे विंडोज का समर्थन करने वाले तरीके से फिर से लागू करें। यह सिर्फ मेरे उपयोग-मामले का हिस्सा नहीं था, इसलिए मैंने इस पर कोई समय नहीं बिताया।
कभी नहीं 10

14

CSS फ़ाइल (URL शामिल करें) की सामग्री इस बात पर निर्भर करती है कि मैं इसे किस ब्राउज़र से देख रहा हूं। उदाहरण के लिए, जब Chrome का उपयोग करके http://fonts.googleapis.com/css?family=Open+Sans पर ब्राउज़ किया जाता है , तो फ़ाइल में केवल WOFF लिंक होते हैं। इंटरनेट एक्सप्लोरर (नीचे) का उपयोग करते हुए, इसमें ईओटी और डब्ल्यूओएफएफ दोनों शामिल थे। मैंने उन्हें डाउनलोड करने के लिए अपने ब्राउज़र में सभी लिंक चिपकाए।

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

जब आप अपने स्वयं के वेब फॉन्ट की मेजबानी करते हैं, तो आपको प्रत्येक फॉन्ट प्रकार से सही ढंग से लिंक करने की आवश्यकता होती है , विरासत ब्राउज़र बग से निपटना, आदि। जब आप Google वेब फ़ॉन्ट्स का उपयोग करते हैं (Google द्वारा होस्ट किया जाता है), तो Google स्वचालित रूप से उस ब्राउज़र के लिए सही फ़ॉन्ट प्रकारों से जुड़ जाता है।


1
+1 उस लेख से जोड़ने के लिए जो "सार्वभौमिक" CSS कोड का उपयोग करता है और आधुनिक ब्राउज़रों के लिए "कम" होता है!
इटलीपेलएले

2
तो मुझे अलग-अलग प्रारूप के साथ ब्राउज़र को स्मार्ट तरीके से सेवा देने की आवश्यकता होगी। मुझे पता है कि यह बहुत हतोत्साहित है लेकिन हम अपने पेज को चीन के कुछ ग्राहकों को परोस रहे हैं और यह मुख्य कारण है कि हम इसकी मेजबानी करना चाहते हैं। उन्होंने अधिकांश Google संसाधनों को अवरुद्ध कर दिया।
लियोनेल चान

6

जब तक आप फ़ॉन्ट के लाइसेंस की शर्तों से चिपके रहते हैं, तब तक इसे कानूनी रूप से अनुमति दी जाती है - आमतौर पर OFL।

आपको वेब फ़ॉन्ट स्वरूपों के एक सेट की आवश्यकता होगी, और फ़ॉन्ट गिलहरी वेबफॉन्ट जनरेटर इनका उत्पादन कर सकता है।

लेकिन ओएफएल आवश्यक है कि फोंट का नाम बदल दिया जाए यदि वे संशोधित किए जाते हैं, और जनरेटर का उपयोग करने का मतलब उन्हें संशोधित करना है।


या, टाइपफेस के आधार पर, आप सीधे फ़ॉन्ट गिलहरी से वेबफॉन्ट किट प्राप्त कर सकते हैं। fontquirrel.com/fonts/open-sans
जैक फ्रॉस्ट

3

मेरे पास PHP में लिखी स्क्रिप्ट है जो @neverpanic के समान है जो Google से CSS और फोंट ( संकेत और अनसुना दोनों ) को स्वचालित रूप से डाउनलोड करती है । यह तब उपयोगकर्ता एजेंट के आधार पर अपने स्वयं के सर्वर से सही सीएसएस और फोंट परोसता है। यह अपना कैश रखता है, इसलिए उपयोगकर्ता एजेंट के फोंट और सीएसएस केवल एक बार डाउनलोड किए जाएंगे।

यह एक समय से पहले का चरण है, लेकिन इसे यहां पाया जा सकता है: DaAwesomeP / php-offline-fonts


2

जैसा कि आप अपने स्वयं के सर्वर पर सभी फोंट (या उनमें से कुछ) को होस्ट करना चाहते हैं, आप इस रेपो से फोंट डाउनलोड करते हैं और इसे जिस तरह से आप चाहते हैं उसका उपयोग करते हैं: https://github.com/praisedpk/Local-Google-Fonts

यदि आप Google फ़ॉरेस्ट के साथ आने वाले लीवरेज ब्राउज़र कैशिंग समस्या को ठीक करने के लिए ऐसा करना चाहते हैं, तो आप वैकल्पिक फोंट CDN का उपयोग कर सकते हैं , और फोंट को इस प्रकार शामिल कर सकते हैं :

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

या एक विशिष्ट फ़ॉन्ट, जैसे:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />

1

मैंने grunt टास्क में grunt-local-googlefont का इस्तेमाल किया ।

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

फिर, उन्हें पुनः प्राप्त करने के लिए:

grunt local-googlefont:opensans

ध्यान दें, मैं मूल से एक कांटा का उपयोग कर रहा हूं, जो उनके नाम में व्हाट्सएप के साथ फोंट को पुनर्प्राप्त करते समय बेहतर काम करता है।


1

आप वास्तव में सभी फ़ॉन्ट प्रारूप वेरिएंट को Google से सीधे डाउनलोड कर सकते हैं और उन्हें अपने सर्वर से सेवा करने के लिए अपने सीएसएस में शामिल कर सकते हैं। इस तरह से आपको अपनी साइट के उपयोगकर्ताओं को ट्रैक करने वाले Google के बारे में चिंता करने की आवश्यकता नहीं है। हालाँकि, नकारात्मक पक्ष आपकी अपनी सेवा की गति को धीमा कर सकता है। फ़ॉन्ट्स संसाधनों पर काफी मांग कर रहे हैं। मैंने अभी तक इस मुद्दे में कोई परीक्षण नहीं किया है, और आश्चर्य है कि अगर किसी के समान विचार हैं।



1

: मैं की तरह एक गूगल फ़ॉन्ट्स सीएसएस आयात URL से डाउनलोड लिंक प्राप्त करने के लिए एक छोटे से PHP स्क्रिप्ट बनाया https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

आप इस उपकरण का उपयोग यहां कर सकते हैं: http://nikoskip.me/gfonts.php

उदाहरण के लिए, यदि आप उपरोक्त आयात URL का उपयोग करते हैं, तो आपको यह मिलेगा:

यहां छवि विवरण दर्ज करें


1

यदि आप वेबपैक का उपयोग कर रहे हैं, तो आपको इस परियोजना में रुचि हो सकती है: https://github.com/KyleAMathews/typefaces

उदाहरण के लिए, आप रोबोटो फ़ॉन्ट का उपयोग करना चाहते हैं:

npm install typeface-roboto --save

फिर इसे अपने ऐप के एंट्रीपॉइंट (मुख्य js फ़ाइल) में आयात करें:

import 'typeface-roboto'

1

आप PHP का उपयोग करके विकसित की गई स्क्रिप्ट का अनुसरण कर सकते हैं। जहां आप स्क्रिप्ट का इस्तेमाल करके किसी भी गूगल फॉन्ट को डाउनलोड कर सकते हैं। यह फोंट डाउनलोड करेगा और ज़िप करने के लिए एक सीएसएस फ़ाइल और संग्रह तैयार करेगा।
आप स्रोत कोड को GitHub https://github.com/sourav101/google-fonts-downloader से डाउनलोड कर सकते हैं

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}

0

K0pernicus के अलावा, मैं सबसे अच्छा-परोसा गया स्थानीय सुझाव देना चाहूंगा । यह वेबसर्वर ऑपरेटरों को अपने स्वयं के वेबसर्वर से Google वेब फोंट डाउनलोड करने और सेवा करने में सक्षम करने के लिए एक बैश (v4) स्क्रिप्ट भी है। लेकिन अन्य बैश स्क्रिप्ट के अलावा, यह उपयोगकर्ता को पूरी तरह से स्वचालित (क्रोन के माध्यम से और इस तरह) अप-टू-डेट फ़ॉन्ट फ़ाइलों और सीएसएस-फाइलों की सेवा प्रदान करने देता है।


0

एक बहुत ही सरल स्क्रिप्ट है, जिसे सादे जावा में लिखा गया है, एक Google वेब फॉन्ट लिंक (समर्थित कई फोंट) से सभी फोंट डाउनलोड करने के लिए। यह CSS फ़ाइल को भी डाउनलोड करता है और इसे स्थानीय फ़ाइलों में एडाप्ट करता है। उपयोगकर्ता-एजेंट को केवल WOFF2 के अलावा अन्य फ़ाइलों को प्राप्त करने के लिए अनुकूलित किया जा सकता है। Https://github.com/ssc-hrep3/google-font-download देखें

परिणामी फ़ाइलों को आसानी से एक निर्माण प्रक्रिया में जोड़ा जा सकता है (जैसे एक वेबपैक बिल्ड जैसे vue-webpack)।


0

आप स्रोत फ़ॉन्ट को https://github.com/google/fonts से डाउनलोड कर सकते हैं

उसके बाद font-rangerटूल का उपयोग करके अपने बड़े यूनिकोड फ़ॉन्ट को कई सबसेट (जैसे लैटिन, सिरिलिक) में विभाजित करें। आपको उपकरण के साथ निम्नलिखित करना चाहिए:

  • आपके द्वारा समर्थित प्रत्येक भाषा के लिए सबसेट बनाएं
  • बैंडविड्थ को बचाने के लिए यूनिकोड-रेंज सब्मिटिंग का उपयोग करें
  • अपने फोंट से ब्लोट निकालें और उन्हें वेब के लिए अनुकूलित करें
  • अपने फोंट को एक संपीड़ित woff2 प्रारूप में बदलें
  • पुराने ब्राउज़रों के लिए .woff फॉलबैक प्रदान करें
  • फॉन्ट लोडिंग और रेंडरिंग को कस्टमाइज़ करें
  • सीएसएस फ़ाइल को @ फॉन्ट-फेस नियमों के साथ जनरेट करें
  • स्वयं-होस्ट वेब फ़ॉन्ट या स्थानीय रूप से उनका उपयोग करें

फ़ॉन्ट-रेंजर : https://www.npmjs.com/package/font-ranger

PS आप Node.js API का उपयोग करके इसे स्वचालित भी कर सकते हैं

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.