CSS फ़ाइल में Google वेब फ़ॉन्ट कैसे आयात करें?

258

मैं एक सीएमएस के साथ काम कर रहा हूं, जो मेरे पास केवल सीएसएस फ़ाइल तक पहुंच है। इसलिए, मैं दस्तावेज़ के हेड में कुछ भी शामिल नहीं कर सकता। मैं सोच रहा था कि क्या सीएसएस फ़ाइल के भीतर से वेब फ़ॉन्ट आयात करने का कोई तरीका था?

css fonts google-webfonts

— डेविड
स्रोत

382

@importविधि का प्रयोग करें :

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

जाहिर है, "ओपन संस" ( Open+Sans) आयात किया जाने वाला फ़ॉन्ट है। इसलिए इसे अपने साथ बदलें। यदि फ़ॉन्ट के नाम में कई शब्द हैं, तो URL +प्रत्येक शब्द के बीच एक संकेत जोड़कर इसे एनकोड करता है , जैसा कि मैंने किया था।

जगह सुनिश्चित करें @importकिसी भी नियम से पहले, अपने सीएसएस के बहुत ऊपर ।

Google फ़ॉन्ट्स स्वचालित रूप से आपके लिए @importनिर्देश उत्पन्न कर सकते हैं। एक बार जब आप एक फ़ॉन्ट चुन लेते हैं, तो उसके (+)बगल में स्थित आइकन पर क्लिक करें । निचले-बाएँ कोने में, "1 परिवार चयनित" शीर्षक वाला एक कंटेनर दिखाई देगा। इसे क्लिक करें, और यह विस्तार करेगा। विकल्पों का चयन करने के लिए "अनुकूलित करें" टैब का उपयोग करें, और फिर "एंबेड" पर वापस जाएं और "एंबेड फ़ॉन्ट" के तहत "@पोर्ट" पर क्लिक करें। <style>अपनी स्टाइलशीट में टैग के बीच सीएसएस को कॉपी करें ।

— ModernDesigner
स्रोत

25

आप जोर से @import के उपयोग से बचते हैं क्योंकि यह सम्मिलित संसाधन के लोड को तब तक टाल देगा जब तक कि फ़ाइल को प्राप्त नहीं किया जाता है। यहां देखें विस्तृत जवाब: stackoverflow.com/a/12380004/925560

— रेनैटो कार्वाल्हो

5

@Import line को शीर्ष पर ले जाने से मेरी ज़िंदगी हल हो गई! धन्यवाद!

— जोलसेगो

2

Google ऐसा क्यों कहता है? Google इनसाइट्स @import नहीं करने का दावा करता है। Developers.google.com/speed/pagespeed/insights ?

— खतरे '

2

यह एक पुराना उत्तर है। @importक्रमिक रूप से लोड होता है और इससे सबसे अच्छा बचा जाता है: varvy.com/pagespeed/avoid-css-import.html Google फोंट लोड करने का पसंदीदा (और डिफ़ॉल्ट) तरीका इन दिनों का उपयोग कर रहा है <link>।

— चक ले बट

2

जब आप एसईओ में आएंगे तो आपको इसका पछतावा होगा और Google PageSpeed अंतर्दृष्टि के साथ अपने पेज की गति को अनुकूलित करना शुरू करेंगे। <link>इसके बजाय इसका उपयोग और अनुकूलन करें ।

— लेखाकार

67

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

@Import का उपयोग न करने के लिए बेहतर है। बस लिंक तत्व का उपयोग करें, जैसा कि ऊपर दिखाया गया है, आपके लेआउट के सिर में।

— बुर्क
स्रोत

19

क्या आप "बेहतर उपयोग न करने" पर विस्तार कर सकते हैं? मैंने इस प्रश्न की खोज की क्योंकि मैं जानना चाहता हूं कि कौन सी विधि सर्वश्रेष्ठ मानी जाती है।

— एडम होलो

2

मुझे @import के साथ इंटरनेट एक्सप्लोरर की समस्या थी। कभी-कभी यह सिर्फ इसे नहीं पढ़ता है।

— बर्क

6

उन्होंने विशेष रूप से कहा कि वह अपने हेडर में <लिंक> टैग का उपयोग नहीं कर सकते।

— नाथन

26

'लिंक' का उपयोग करने के लिए +1, क्योंकि यह अन्य बाहरी फ़ाइलों के समानांतर लोडिंग को ब्लॉक नहीं करेगा। 'आयात' अन्य बाहरी फ़ाइलों के समानांतर लोडिंग को अवरुद्ध करेगा।

— जाहमिक

2

@Import का उपयोग करके आप HTML मार्कअप के बजाय CSS स्टाइलिंग के फ़ॉन्ट भाग को बनाने में सक्षम हैं, जो शब्दार्थ अधिक सही लगता है, और आप CSS के माध्यम से अपनी साइट पर फोंट स्वैप कर सकते हैं। लेकिन जैसा कि चक ने टिप्पणी की थी, ऐसा लगता है कि आप इसके लिए थोड़ी गति हिट लेते हैं। हो सकता है कि लोड के समय को देखें, फिर केस करके केस तय करें। ध्यान दें कि SVGs @import के लिए एकमात्र तरीका है जो AFAIK का काम करता है ।

— मेंटलिस्ट

38

फ़ॉन्ट ttf / अन्य प्रारूप फ़ाइलों को डाउनलोड करें, फिर बस इस सीएसएस कोड उदाहरण जोड़ें:

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

स्निपेट का विस्तार करें

— फिदेल
स्रोत

36

Google वेब फ़ॉन्ट्स आयात करने के लिए अपने CSS फ़ाइल में नीचे कोड जोड़ें।

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

अपने फ़ॉन्ट नाम के साथ ओपन + संस पैरामीटर मान बदलें ।

आपकी सीएसएस फ़ाइल की तरह दिखना चाहिए:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

— शुभम कुमार
स्रोत

13

बस https://fonts.google.com/ पर जाएं
+ पर क्लिक करके फ़ॉन्ट जोड़ें
चयनित फ़ॉन्ट पर जाएं> एंबेड> @ आईआईएमपोर्ट> बॉडी टैग के ऊपर अपनी .css फ़ाइल में url कॉपी और पेस्ट करें।
हॊ गया।

— करुनेश
स्रोत

8

@Import टैग का उपयोग करें

@import url('http://fonts.googleapis.com/css?family=Kavoon');

— jmz7v
स्रोत

8

उपरोक्त उत्तरों के साथ, इस साइट पर भी विचार करें; https://google-webfonts-helper.herokuapp.com/fonts

फायदा:

आपको बेहतर प्रतिक्रिया समय के लिए उन Google फोंट को स्व-होस्ट करने की अनुमति देता है
अपना फ़ॉन्ट चुनें
अपना चरित्र सेट चुनें
अपनी फ़ॉन्ट शैली / वजन चुनें
अपना लक्ष्य ब्राउज़र चुनें
और आप सीएसएस स्निपेट प्राप्त करें (अपनी सीएसएस स्टाइलशीट में जोड़ें) प्लस अपने प्रोजेक्ट में शामिल करने के लिए फ़ॉन्ट फ़ाइलों का एक ज़िप

जैसे कि आपका_थीम

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal;  
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
}

body { 
    font-family: 'Open Sans',sans-serif;
}

— MarcoZen
स्रोत

1

यह भी आपको font-weight: 400पहले लोड करने की अनुमति देता है और फिर बिना किसी तर्क के एक ही कोड का उपयोग करके बाकी फ़ॉन्ट को लोड करता है। यह तेज़ प्रदर्शन की अनुमति देता है और, यदि आप पूरे फ़ॉन्ट, छोटी सीएसएस फ़ाइलों की आवश्यकता को समाप्त नहीं करते हैं।

— मोटो

4

आप URL से लिंक करने के लिए @ font-face का भी उपयोग कर सकते हैं। http://www.css3.info/preview/web-fonts-with-font-face/

क्या सीएमएस आईफ्रेम का समर्थन करता है? आप अपनी सामग्री के शीर्ष में भी एक iframe फेंकने में सक्षम हो सकते हैं। यह शायद धीमा होगा - इसे अपने सीएसएस में शामिल करना बेहतर होगा।

— एरिक की
स्रोत

3

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

फ़ॉन्ट चुनने के लिए आप लिंक पर जा सकते हैं: https://fonts.google.com

कोष्ठक को छोड़कर वेबसाइट से अपनी पसंद का फ़ॉन्ट नाम लिखें।

उदाहरण के लिए आपने अपनी पसंद के फ़ॉन्ट के रूप में लॉबस्टर को चुना,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

फिर आप इसे सामान्य रूप से अपनी संपूर्ण HTML / CSS फ़ाइल में एक फ़ॉन्ट-परिवार के रूप में उपयोग कर सकते हैं।

उदाहरण के लिए

<h2 style="Lobster">Please Like This Answer</h2>

— RohanVTK
स्रोत

2

ज्यूस लिंक के माध्यम से जाना

https://developers.google.com/fonts/docs/getting_started

स्टाइलशीट के उपयोग के लिए इसे आयात करने के लिए

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

— उपिन्दास दोपहर
स्रोत

1

हम इसे आसानी से css3 में कर सकते हैं। हमें केवल @import स्टेटमेंट का उपयोग करना है। निम्न वीडियो आसानी से तरीका बताता है कि कैसे करना है। इसलिए आगे बढ़ो और इसे देखो।

https://www.youtube.com/watch?v=wlPr6EF6GAo

— ज्ञान
स्रोत