लेआउटमधील गैर-मानक वेब फॉन्ट. Google फॉन्ट आणि वेबफॉन्ट

धड्याचा पहिला भाग CSS फॉन्ट सादर करण्यासाठी समर्पित आहे. या पेजवर तुम्ही CSS मध्ये फॉन्ट कसे समाविष्ट करायचे, वेब फॉन्ट्स कोणते आहेत आणि त्यांच्यासोबत कसे कार्य करायचे, फॉन्टचे स्वरूप कोणते आहेत, कसे वापरायचे ते शिकू शकाल. Google फॉन्ट. प्रथम, CSS फॉन्ट कनेक्ट करण्याचे एक साधे उदाहरण पाहू:

पी (फॉन्ट-फॅमिली: वर्दाना; )

कोडचा हा छोटा तुकडा म्हणजे सर्व टॅगसाठी

वापरलेला फॉन्ट वर्डाना आहे. फॉन्ट-फॅमिली प्रॉपर्टी कोणता फॉन्ट किंवा फॉन्ट फॅमिली वापरला जाईल हे निर्दिष्ट करते. वापरकर्त्याच्या ब्राउझरमध्ये या शैलीचे योग्य प्रदर्शन यावर अवलंबून आहे की नाही दिलेला फॉन्ट. आमच्या बाबतीत, जर वापरकर्त्याच्या संगणकावर वर्डाना फॉन्ट नसेल, तर ब्राउझर डीफॉल्ट फॉन्ट प्रदर्शित करेल.

एका वेळी, वापरकर्त्याच्या संगणकावर मुख्य नसल्यास डिझाइनरना अनेक बॅकअप फॉन्ट देखील निर्दिष्ट करावे लागतील. समजा तुम्हाला वर्डाना फॉन्टमध्ये मजकूर फॉरमॅट करायचा आहे आणि ट्रेबुचेट एमएस, जिनिव्हा आणि कोणताही sans-serif फॉन्ट बॅकअप फॉन्ट म्हणून स्थापित करायचा आहे. हे असे लिहिले आहे:

पी (फॉन्ट-फॅमिली: वर्डाना, "ट्रेबुचेट एमएस", जिनेव्हा, सॅन्स-सेरिफ; )

या कोडवर प्रक्रिया करताना, ब्राउझर प्रथम वापरकर्त्याच्या संगणकावर व्हरडाना फॉन्टची उपस्थिती तपासेल. फॉन्ट उपस्थित असल्यास, टॅगमधील सामग्री

या फॉन्टमध्ये प्रदर्शित केले जाईल. फॉन्ट गहाळ असल्यास, ब्राउझर सूचीतील पुढील फॉन्टची उपस्थिती तपासेल - ट्रेबुचेट एमएस. हा फॉन्ट देखील गहाळ असल्यास, पुढील फॉन्टची उपस्थिती तपासली जाईल - जिनिव्हा. वापरकर्त्याच्या संगणकावर जिनिव्हा नसल्यास, ब्राउझर दुसरा उपलब्ध sans serif फॉन्ट निवडेल आणि त्या फॉन्टमधील मजकूर प्रदर्शित करेल.

टीप:कोडमध्ये आम्ही ट्रेबुचेट एमएस फॉन्टचे नाव कोट्समध्ये लिहिले. फाँटचे नाव दुहेरी किंवा एकल अवतरणात टाकणे आवश्यक आहे जेव्हा त्यात मोकळी जागा असते.

विकिपीडिया पृष्ठावर सेरिफ (सेरिफ) आणि सॅन्स-सेरिफ (सॅन्स-सेरिफ) फॉन्ट काय आहे याबद्दल आपण वाचू शकता.

वेब फॉन्ट

फॉन्ट वापरण्याच्या वरील पद्धतीचा एक मोठा तोटा आहे - आपण फॉन्टच्या संख्येत मर्यादित आहात. तुम्हाला फक्त अशाच पर्यायांवर समाधानी राहावे लागेल जे बहुधा बहुतेक संगणकांवर स्थापित केले जातात.

पेज डिझाइन वैयक्तिक बनवण्यासाठी आणि मौलिकता जोडण्यासाठी तुम्ही फॉन्टची निवड कशी वाढवू शकता? वेब फॉन्ट बचावासाठी येतात. धडा पुढे वाचा आणि तुम्ही त्यांच्यासोबत कसे कार्य करावे ते शिकाल.

म्हणून, वापरकर्त्याच्या ब्राउझरमध्ये इच्छित फॉन्ट प्रदर्शित करण्यासाठी, आम्हाला हा फॉन्ट त्याच्या संगणकावर डाउनलोड करणे आवश्यक आहे. हे करणे अगदी सोपे आहे. फॉन्टला CSS ला जोडण्याची ही पद्धत डिझाइनरसाठी खरोखर विस्तृत शक्यता उघडते. परंतु मलममधील माशीचा उल्लेख करणे योग्य आहे: प्रथम, प्रत्येक ब्राउझर विशिष्ट फॉन्ट स्वरूपनास समर्थन देत नाही (ज्यामुळे फॉन्ट प्रदर्शित होणार नाही), आणि दुसरे म्हणजे, फॉन्ट फाइल मोठी असल्यास, हे पृष्ठ लोड करणे कमी करू शकते.

स्वरूप समर्थन

फाईल फॉरमॅट न जुळण्याच्या समस्येला कसे सामोरे जावे? सर्वात लोकप्रिय फॉन्ट स्वरूप दर्शविणाऱ्या सारणीवर एक नजर टाकूया आणि कोणते ब्राउझर त्यांना समर्थन देतात ते पाहूया:

टीप:तुम्ही caniuse.com वर फॉन्ट फॉरमॅट सपोर्टवर नेहमीच अद्ययावत माहिती शोधू शकता. तुम्ही सर्च बारमध्ये फॉरमॅटचे नाव (उदाहरणार्थ, ttf) टाकणे आवश्यक आहे.

आपण लक्ष केंद्रित करत असल्यास आधुनिक ब्राउझर, तुम्हाला फक्त TTF फॉन्ट स्वरूप वापरावे लागेल - सर्वात सामान्य आणि वापरलेले. जर तुम्हाला एका फॉन्टचे अनेक फॉरमॅट्स असण्याची आवश्यकता असेल, तेव्हा तुम्ही एका फॉरमॅटमधून दुसऱ्या फॉरमॅटमध्ये विशेष ऑनलाइन कन्व्हर्टर वापरू शकता आणि नंतर सर्व फायली एक-एक करून कनेक्ट करू शकता. अशा प्रकारे ब्राउझर ज्या फॉन्टसह कार्य करतो ते फॉन्ट स्वरूप निवडू शकतो.

@font-face वापरून वेब फॉन्ट कनेक्ट करत आहे

समजा तुमच्याकडे TTF फॉरमॅटमध्ये MyUniqueFont नावाचा तुमचा स्वतःचा अनन्य फॉन्ट आहे आणि तुम्हाला वेब पेजचा मुख्य मजकूर या फॉन्टमध्ये प्रदर्शित करायचा आहे. पहिली गोष्ट म्हणजे फॉन्ट फाईल फोल्डरमध्ये कॉपी करणे जिथे इतर सर्व साइट फायली आहेत. गोंधळ निर्माण होऊ नये म्हणून, तुम्ही विशेषत: फॉन्टसाठी एक स्वतंत्र फोल्डर तयार करू शकता, उदाहरणार्थ, त्याला फॉन्ट म्हणू शकता.

@फॉन्ट-फेस ( फॉन्ट-फॅमिली: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

या प्रकरणात फॉन्ट-फॅमिली प्रॉपर्टी वेगळी भूमिका बजावते: त्याच्या मदतीने आम्ही फॉन्टला एक नाव नियुक्त करतो, जेणेकरून आम्ही शैली लिहिताना हे नाव वापरू शकतो:

P (फॉन्ट-फॅमिली: MyUniqueFont; )

दुसरी ओळ फॉन्ट फाईलचा मार्ग निर्दिष्ट करते. आमच्या उदाहरणात, MyUniqueFont.ttf फाइल फॉन्ट फोल्डरमध्ये स्थित आहे. तुमची URL वेगळी असू शकते.

Google फॉन्ट

Google फॉन्ट संग्रहातून कोणताही फॉन्ट सहजपणे कनेक्ट करणे शक्य करते. तुम्हाला आवडणारा फॉन्ट वापरणे सुरू करण्यासाठी तुम्हाला फक्त फॉन्टच्या Google पेजवर काही सेटिंग्ज नमूद करणे आवश्यक आहे, त्यानंतर त्या फॉन्टची विशिष्ट लिंक कॉपी करा आणि ती तुमच्या वेब दस्तऐवजात जोडा.

टीप: Google फॉन्टचा संपूर्ण संग्रह वेबसाइटवर उपलब्ध आहे Google फॉन्ट. पृष्ठावर तुम्ही श्रेणी, जाडी आणि वर्णमालानुसार फॉन्ट शोधण्यासाठी विविध फिल्टर वापरू शकता.

खाली आम्ही Google फॉन्ट कनेक्ट करण्याच्या प्रत्येक चरणाचे वर्णन करू. काय बोलले जात आहे हे समजून घेण्यासाठी, कोणताही फॉन्ट निवडा Google पृष्ठेफॉन्ट बनवा आणि द्रुत-वापर बटणावर क्लिक करून ते उघडा.

पायरी 1: एक शैली निवडा

सर्व प्रथम, निवडलेल्या फॉन्टच्या पृष्ठावर, त्याच्या शैलीसाठी पर्याय प्रदर्शित केले जातील, तसेच स्पीडोमीटर चिन्ह, ज्याचा अर्थ फॉन्टच्या लोडिंग गतीपेक्षा अधिक काही नाही. तुम्ही जितक्या अधिक फॉन्ट शैली निवडाल, तितका जास्त वेळ लोड होण्यासाठी लागेल. म्हणून, आपण वापरण्याची योजना करत असलेले फक्त तेच शैली पर्याय निवडण्याची शिफारस केली जाते.

पायरी 2: एक वर्णमाला निवडा

पुढे पृष्ठावर तुम्ही वर्ण संच निवडू शकता: लॅटिन, सिरिलिक इ. फॉन्टच्या आधारावर, त्यात सर्व वर्णमाला पर्याय उपलब्ध नसतील. मागील मुद्द्याप्रमाणेच, आवश्यक असलेल्या वर्णमालाच्या विरुद्ध बॉक्स चेक करणे चांगले आहे.

पायरी 3: साइटवर कोड जोडा

पहिल्या पद्धतीमध्ये HTML कोडमध्ये Google सर्व्हरशी लिंक जोडणे समाविष्ट आहे, जिथून फॉन्ट डाउनलोड केला जातो. तुम्हाला कोडचा रेडीमेड तुकडा कॉपी करावा लागेल आणि तो टॅग्जमध्ये ठेवावा लागेल तुमच्या HTML दस्तऐवजात. उदाहरण:

...

दुसरा मार्ग म्हणजे @import निर्देश वापरून फॉन्ट कनेक्ट करणे. तयार कोड निवडलेल्या Google फॉन्टच्या पृष्ठावरील बिंदू 3 च्या दुसऱ्या टॅबमध्ये स्थित आहे. ते तुमच्या स्टाईल शीटच्या अगदी सुरुवातीला जोडले जाणे आवश्यक आहे (अन्यथा फाइल आयात केली जाणार नाही). कोड असे काहीतरी दिसते:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

पहिल्या पद्धतीचे वैशिष्ठ्य हे आहे की आपण फॉन्ट वापरण्याची योजना असलेल्या प्रत्येक पृष्ठाच्या शीर्षलेखामध्ये आपल्याला फॉन्टची लिंक जोडण्याची आवश्यकता असेल. कमी पृष्ठे असलेल्या साइटवर हे करणे सोपे आहे, परंतु मोठ्या संसाधनांसाठी समस्याप्रधान आहे. दुसरी पद्धत सोयीस्कर आहे कारण कोड बाह्य शैली शीटच्या अगदी सुरुवातीला ठेवला जाऊ शकतो आणि नंतर ही सारणी कनेक्ट केलेल्या सर्व पृष्ठांना आवश्यक फॉन्ट प्राप्त होईल, जो @import निर्देश वापरून लोड केला जाईल.

पायरी 4: एक शैली तयार करा

मागील चरण पूर्ण केल्यानंतर, आपण फॉन्ट लागू करणे सुरू करू शकता. हे कसे लिहिले आहे? CSS नियम, तुम्ही आधी पाहिले आहे:

पी (फॉन्ट-फॅमिली: "रोबोटो", सॅन्स-सेरिफ; )

पहिल्या टप्प्यावर तुम्ही शैलीसाठी अनेक पर्याय निवडले असल्यास (उदाहरणार्थ, पर्याय जोडला धीटठळक 700), नंतर तिसऱ्या चरणात कोड किंचित बदलेल:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

नंतर फॉन्ट ठळक करण्यासाठी, CSS शैली अशी लिहा:

P (फॉन्ट-फॅमिली: "रोबोटो", सॅन्स-सेरिफ; फॉन्ट-वजन: 700; )

टीप: Google फॉन्टमध्ये, फॉन्टचे वजन दर्शविण्यासाठी केवळ 100 ते 900 पर्यंतची पारंपारिक एकके वापरली जातात अशा प्रकारे, सामान्य वजन (डिफॉल्टनुसार) 400 (सामान्य) मूल्याच्या समतुल्य असते आणि मानक ठळक वजन 700 (ठळक) च्या समतुल्य असते.

मुख्य फायदे Google सेवाफॉन्ट आहेत:

• वापरणी सोपी (एक नवशिक्या देखील सेवा समजू शकतो, आणि सर्व आवश्यक कोड स्वयंचलितपणे व्युत्पन्न केले जातात - तुम्हाला फक्त ते कॉपी करायचे आहे);
• फॉन्टची उपलब्धता (त्यांच्यासाठी पैसे देण्याची आवश्यकता नाही);
• सर्व वापरलेले फॉन्ट स्वरूप प्रदान केले आहेत (याचा अर्थ असा आहे की प्रत्येक ब्राउझर ज्या फॉन्टचे कार्य करते तेच फॉन्ट स्वरूप डाउनलोड करण्यास सक्षम असेल).

सेवेच्या तोट्यांपैकी हे आहे की फॉन्टची फार विस्तृत विविधता नाही, विशेषत: सिरिलिक. तसे, इंटरनेटवर इतर समान सेवा आहेत, उदाहरणार्थ, टाइपकिट (सशुल्क).

परिणाम

आज आमच्याकडे मूळ आणि नॉन-स्टँडर्ड फॉन्ट वेब पृष्ठांवर जोडण्यासाठी अनेक पर्याय उपलब्ध आहेत. या प्रत्येक पद्धतीचे त्याचे फायदे आणि तोटे आहेत. कोणता पर्याय वापरणे चांगले आहे, आपण स्वत: ला निर्धारित करणे आवश्यक आहे. हे बऱ्याचदा परिस्थितीवर अवलंबून असते आणि वेगवेगळ्या प्रकरणांमध्ये भिन्न दृष्टिकोन उपयुक्त ठरू शकतात. या टप्प्यावर, तुम्हाला फक्त CSS मध्ये फॉन्ट कसे वापरायचे हे माहित असणे आवश्यक आहे.

// echo get_the_post_thumbnail(get_the_ID(), "संबंधित थंबनेल"); // माझ्या लघुप्रतिमा आकार प्रदर्शित करा?>

या पाठात आपण लेआउटमध्ये वेब फॉन्ट कसे समाविष्ट करायचे ते पाहू. वेब फॉन्ट हे अतिरिक्त टाइपफेस आहेत जे डिझाइन अधिक अद्वितीय किंवा वैविध्यपूर्ण करण्यासाठी वापरले जातात. पृष्ठावर फॉन्ट कनेक्ट केल्याने सर्व ब्राउझरमध्ये त्याचे योग्य प्रदर्शन सुनिश्चित होते आणि वापरकर्त्याने तो स्थापित केला आहे की नाही हे महत्त्वाचे नाही.

Google Fonts वरून फॉन्ट कसा जोडायचा

पायरी 1 - फॉन्ट निवडा

सेवा Google फॉन्टवेब फॉन्टचा एक मोठा संच आहे जो एका ओळीत प्रोजेक्टशी कनेक्ट केला जाऊ शकतो आणि लगेच वापरला जाऊ शकतो CSS शैली. पाहण्यासाठी फक्त सिरिलिक फॉन्ट निवडण्यासाठी, स्क्रिप्ट पॅरामीटरमध्ये डावीकडील फिल्टरमध्ये तुम्हाला सिरिलिक (सिरिलिकसाठी) किंवा सिरिलिक विस्तारित (विस्तारित सिरिलिकसाठी) निवडणे आवश्यक आहे. यानंतर, सिरिलिकला समर्थन देणारे फॉन्ट उजवीकडे दर्शविले जातील.

द्रुत वापरासाठी, द्रुत वापर बटणावर क्लिक करा.

पायरी 2 - फॉन्ट सेटिंग्ज समायोजित करा

पुढील पृष्ठावर आपण कोणत्या फॉन्ट शैली वापरणार आहोत ते निवडतो. OpenSans फॉन्टमध्ये 10 वजने आहेत, अगदी पातळ ते अतिरिक्त ठळक. तुम्ही जितक्या अधिक शैली निवडाल तितका त्याचा पृष्ठ लोड होण्याच्या गतीवर परिणाम होईल. त्यामुळे, तुम्ही वापरत असलेले फॉन्टच समाविष्ट करावेत. त्यानंतर, तुम्ही सिरिलिक वर्णमालासाठी वर्ण संच निवडू शकता, सिरिलिक विस्तारित किंवा सिरिलिक आणि लॅटिन निवडा.

पायरी 3 - फॉन्ट कनेक्ट करण्यासाठी कोड

मग आम्ही तुमच्या वेबसाइटशी कनेक्ट होण्यासाठी कोडची एक ओळ घेतो. मानक पर्याय म्हणजे html वरून तृतीय-पक्ष css फाइल कनेक्ट करणे, @import टॅबवर css फाइलद्वारे कनेक्ट करण्यासाठी एक ओळ असेल आणि Javascript साठी तिसरा पर्याय असेल. यानंतर, कनेक्शन तयार आहे आणि तुम्ही हा फॉन्ट तुमच्या लेआउटमध्ये वापरू शकता. खालील ब्लॉक फॉन्टमध्ये प्रवेश कसा करायचा याचे उदाहरण दाखवते: फॉन्ट-फॅमिली: "ओपन सॅन्स", सॅन्स-सेरिफ;

आम्ही फॉन्ट-वजन पॅरामीटर वापरून रुंदी सेट करतो: 300; किंवा फॉन्ट-वजन: 400; फॉन्ट-वजन: 800; तिर्यक - फॉन्ट-शैलीद्वारे: इटालिक; .

वापराचे उदाहरण

परिणामी, आम्ही CSS मध्ये @import द्वारे फॉन्ट समाविष्ट करणे निवडल्यास, आमची CSS फाइल यासारखी दिसेल:

/* फॉन्ट कनेक्ट करत आहे*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); /* हेडर h1 साठी शैली परिभाषित करा */ h1( /* कनेक्ट केलेला फॉन्ट "ओपन सॅन्स" टाइपफेस म्हणून निवडा */ फॉन्ट-फॅमिली: "ओपन सॅन्स", सॅन्स-सेरिफ; /* फॉन्ट जाडी 300 निवडा, जे होईल हलक्या शैलीशी संबंधित - पातळ आकारासाठी*/ फॉन्ट-वजन: 300;

वेबसाइट डिझाइनमध्ये फॉन्ट महत्त्वाची भूमिका बजावते; ते संपूर्ण शैलीवर जोर देते आणि वापरकर्त्याला मजकूर सामग्री नेव्हिगेट करण्यास मदत करते. विनामूल्य फॉन्ट शोधणे आणि नंतर वेगवेगळ्या ब्राउझरसाठी फायलींचा समूह जोडणे हे काही फायद्याचे काम नाही, परंतु एक मार्ग आहे - Google फॉन्ट्स मधील फॉन्ट.

Google Fonts वरून योग्य फॉन्ट शोधत आहे

चला स्वतः Google फॉन्ट सेवेवर जाऊ आणि त्यातील क्षमता पाहू.

डाव्या (बाजूच्या) पॅनेलमध्ये, तुम्ही फॉन्ट फिल्टरिंग पॅरामीटर्स कॉन्फिगर करू शकता आणि सर्वात महत्त्वाचे म्हणजे, ते सिरिलिक किंवा लॅटिन वर्णमालाचे आहे की नाही ते निवडा.
वरच्या भागात, आपण डेमो मजकूराचे प्रदर्शन या स्वरूपात बदलू शकता: शब्द, वाक्य, परिच्छेद, पोस्टर्स. फॉन्ट आकार बदला आणि डेमो पर्यायाऐवजी तुमचा मजकूर प्रविष्ट करा.

Google Fonts वरून फॉन्ट कनेक्ट करत आहे

आपण इच्छित फॉन्ट निवडल्यानंतर, “त्वरित-वापर” बटणावर क्लिक करा (खालील चित्र पहा)

फॉन्ट कनेक्शन पृष्ठावर, आपल्याला निवडण्याची आवश्यकता आहे:

1. फॉन्ट शैली, ठळकपणा, तिर्यक इ. जास्त वेग वाढवू नका, फक्त सर्वात आवश्यक निवडा, कारण... हे सर्व फॉन्ट लोड करण्याच्या गतीवर आणि त्यानुसार, आपल्या साइटवर मजकूर लोड करण्याच्या गतीवर परिणाम करते. उजवीकडील सेन्सर रीडिंगचे निरीक्षण करा (चित्रातील बिंदू 5)
2. या फॉन्टमध्ये तुम्हाला कोणते वर्ण हवे आहेत ते निवडा (प्रामुख्याने लॅटिन आणि सिरिलिक).
3. लिंक टॅग कोड हेड ब्लॉकमध्ये कॉपी करा
4. चरण 4 मध्ये दर्शविल्याप्रमाणे शैलींमध्ये फॉन्ट घोषणा वापरा (चित्र पहा)

Google फॉन्ट हे विनामूल्य वेब फॉन्टसाठी सर्वोत्तम संसाधनांपैकी एक आहे आणि Google तुम्हाला ते तुमच्या वेबसाइटवर आयात करण्याचे अनेक मार्ग देते. दुर्दैवाने, त्यापैकी कोणत्याही लोकप्रिय वर्डप्रेस इंजिनचा समावेश नाही. याचा अर्थ तुम्हाला एकतर प्लगइन वापरावे लागतील, ज्यापैकी बरेच आहेत, किंवा कोडसह तुमचे हात घाणेरडे करा.

चांगली बातमी अशी आहे की तुम्ही यावरून कोणताही फॉन्ट इन्स्टॉल करू शकता Google लायब्ररीजवळजवळ कोणत्याही वर्डप्रेस थीमवर जास्त त्रास न होता. नेमके कसे - आज आम्ही तुम्हाला शिकवू.

दोन पर्याय आहेत - प्लगइन कनेक्ट करा, किंवा functions.php फाइलसह थोडे खेळा.

परंतु प्रथम, मी Google फॉन्टचे फायदे आणि तोटे सूचीबद्ध करू इच्छितो जेणेकरुन शेवटी तुम्ही ते तुमच्या प्रकल्पांमध्ये वापरायचे की नाही हे ठरवू शकाल.

चांगले आणि वाईट Google वेबफॉन्ट

जेव्हा वेब फॉन्टचा विचार केला जातो तेव्हा Google हा सर्वोत्तम पर्यायांपैकी एक आहे कामगिरीच्या दृष्टीने . सर्व हलके डिझाइन आणि कॅशिंग सिस्टममुळे. अभ्यागतांनी अलीकडेच वापरलेल्या साइटला भेट दिली असल्यास Google फॉन्ट लोड होण्याची प्रतीक्षा करावी लागणार नाही. Open Sans सारखे लोकप्रिय फॉन्ट लोडिंग वेळा कमी करून तुमच्या साइटचे कार्यप्रदर्शन सुधारू शकतात.

आणखी एक वैशिष्ट्य म्हणजे Google तुम्हाला हे फॉन्ट डाउनलोड करण्याची परवानगी देते , जेणेकरून तुम्ही ते तुमच्या लेआउटमध्ये वापरू शकता.

आणि शेवटी प्लॅटफॉर्म पूर्णपणे विनामूल्य आहे . फॉन्ट वापरणे सुरू करण्यासाठी, तुम्हाला फक्त लॉग इन करणे किंवा तयार करणे आवश्यक आहे मेलबॉक्स Gmail (आजकाल कोणाकडे Gmail नाही?).

उणीवा हेही हे सूचित करणे शक्य आहे Google फॉन्टची निवड लहान आहे , त्यापैकी बरेच एकमेकांसारखे आहेत. सभ्य, मूळ फॉन्ट शोधण्यासाठी तुम्हाला खूप वेळ घालवावा लागेल. सिरिलिकसाठी फारच कमी फॉन्ट आहेत.

याशिवाय, नेहमीच्या आहेत सुरक्षा समस्या - आपल्या साइटवर Google फॉन्ट स्थापित करताना आपल्याला काही वैयक्तिक माहिती प्रदान करणे आवश्यक आहे.

वर्डप्रेस प्लगइन्स वापरून Google फॉन्ट कसे स्थापित करावे

तुम्ही प्लगइन्स शोधल्यास, शोध परिणामांमध्ये तुम्हाला पहिली गोष्ट दिसेल WP Google फॉन्ट आणि सोपे Google वेब फॉन्ट प्लगइन . हे खरोखर दोन सर्वोत्तम प्लगइन आहेत.

प्लगइन्ससाठी एक आदर्श उपाय नाही Google स्थापना-वर्डप्रेस साइटवर फॉन्ट्स - केवळ कार्यप्रदर्शनाच्या दृष्टिकोनातूनच नाही तर प्लगइन्स तुम्हाला मजकूराचे काही तुकडे निवडण्याची परवानगी देत ​​नाहीत. तथापि, जर तुम्हाला किंवा तुमच्या क्लायंटला खात्री असेल की प्लगइन चांगले आहेत, तर हे दोन पर्याय पहा.

हे प्लगइन तुम्हाला विशिष्ट घटक जसे की H1 शीर्षके, परिच्छेद आणि कोट्स लक्ष्यित करण्याची परवानगी देते. वैयक्तिक फॉन्ट शैलींसह पुढे कार्य करण्यासाठी तुम्हाला एक सानुकूल CSS पर्याय देखील मिळेल. या प्लगइनसह आपल्या वर्डप्रेस साइटवर Google फॉन्ट जोडणे आणि सानुकूलित करणे खूप सोपे आहे.

सोपे Google वेब फॉन्ट त्याच्या नावाप्रमाणे जगतात आणि अगदी नवशिक्यांसाठीही Google फॉन्ट स्थापित करणे खूप सोपे बनवते. तुम्ही तुमची वेबसाइट न सोडता फॉन्टचे पूर्वावलोकन, चाचणी आणि ऑप्टिमाइझ करण्यासाठी थेट पूर्वावलोकन वापरू शकता आणि कोडची एक ओळ न लिहिता तुमचे स्वतःचे फॉन्ट नियम तयार करू शकता.

वर्डप्रेस टेम्पलेटमध्ये Google फॉन्ट स्थापित करण्याचा योग्य मार्ग

शेवटी आम्ही functions.php फाईल उघडण्याच्या आणि कोडसह थोडासा खेळण्याच्या पर्यायावर येतो. तुम्ही हे करण्यापूर्वी, तुम्हाला Google च्या लायब्ररीमधून फॉन्ट निवडणे आवश्यक आहे. उदाहरणार्थ, एक अतिशय लोकप्रिय घेण्याचा प्रयत्न करूया ओपन सॅन्स.

पुढे, आपल्याला फॉन्ट शैली निवडण्याची आवश्यकता आहे - सामान्य, ठळक किंवा तिर्यक. आपण हे स्वतः करू शकता :)

तुम्ही शैली निवडल्यानंतर, Google तुम्हाला एक कोड स्निपेट देईल. आमचे असे दिसते:

याव्यतिरिक्त, आम्हाला CSS शैली मिळाली:

font-family: "Open Sans", sans-serif;

आता functions.php फाइल उघडण्याची वेळ आली आहे (फाइल पथ: wp-content/themes/yourtheme). फाइलच्या शेवटी, एक नवीन फंक्शन जोडा:

फंक्शन load_fonts()
{
wp_register_style("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googleFonts");
}
add_action("wp_print_styles", "load_fonts");

या वैशिष्ट्याची मुख्य म्हणजे "wp_enqueue_style" कमांड, जी वर्डप्रेसला प्रत्येक पृष्ठाच्या शीर्षलेखात फॉन्ट शैली पत्रके कॉल करण्यास भाग पाडते. तुम्ही बारकाईने पाहिले तर तुम्हाला दिसेल की Google ने आम्हाला दिलेल्या कोडमधून आम्ही href= आणि rel='stylesheet' type'text/css' लिंक काढून टाकली आहे आणि तुम्हाला इतर कोणताही Google फॉन्ट जोडायचा असल्यास तुम्हाला तेच करावे लागेल. तुमच्या वर्डप्रेस साइटसाठी.

तुम्हाला आता फक्त मुख्य CSS फाइल उघडायची आहे आणि Open Sans सह स्टाईलमध्ये पेस्ट करायची आहे. येथे नेहमीचे नियम लागू होतात, त्यामुळे तुमच्या स्टाईलशीटमध्ये खालील कोड जोडा, सेव्ह करा आणि अपडेट करा:

शरीर
{
फॉन्ट: सामान्य 1em "Open Sans", sans-serif;
रंग: #313131;
}

ही शैली संपूर्ण साइटवर कार्य करेल. तुम्ही वैयक्तिक मजकूराच्या तुकड्यांसाठी वेगळी शैली सेट करू शकता:

ठळक मजकूर
{
फॉन्ट: ठळक 1em "Open Sans", sans-serif;
}

जसे आपण पाहू शकता, सर्वकाही अगदी सोपे आहे. हे करून पहा आणि परिणाम तपासा :)

सर्वांना नमस्कार! आज मी तुम्हाला कसे वापरायचे ते सांगू इच्छितो Google फॉन्ट APIआपल्याला आवश्यक असलेले फॉन्ट घालण्यासाठी.

डावीकडे आपण पाहू शकता फिल्टर, आणि उजवीकडे विविध फॉन्टची उदाहरणे आहेत. तुम्हाला आवडणारे कोणतेही निवडा. पुढे बटणावर क्लिक करा जलद वापर.

यानंतर, तुमच्या समोर एक पृष्ठ दिसेल जिथे तुम्ही तुम्हाला आवश्यक असलेल्या फॉन्ट शैली निवडू शकता.

उदाहरणार्थ, सामान्य (400) आणि ठळक (700) शैली निवडा.

खाली, नंबरच्या खाली 3 , तुम्ही एम्बेड कोड शोधू शकता. मी स्टाईल फाइलशी कनेक्ट होण्यास प्राधान्य देतो, म्हणून मी टॅबवर क्लिक करेन @इम्पोर्ट. हा कोड कॉपी करा.

आता एक फाईल बनवू index.htmlमजकूराच्या परिच्छेदासह.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. सेपे, अधिकृत?

टॅगमध्ये आमचे स्टाइल शीट समाविष्ट करूया डोके

आणि स्टाईल शीटमध्ये, फाइलच्या सुरुवातीला, कॉपी केलेला कोड पेस्ट करा.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

मी फॉन्ट निवडला ओपन सॅन्सउदाहरणार्थ. तो सर्वात पहिला आहे.

फॉन्टसह पृष्ठावर, क्रमांकाच्या खाली 4 , आम्हाला आवश्यक असलेली शैली तुम्ही शोधू शकता. चला ते कॉपी करून आमच्या परिच्छेदात लागू करूया.

P (फॉन्ट-फॅमिली: "ओपन सॅन्स", सॅन्स-सेरिफ; )

सर्व! आता तुम्ही तुमच्या नवीन फॉन्टचा आनंद घेऊ शकता!

पण आम्ही ठळक शैली देखील निवडली हे विसरू नका. ते वापरण्यासाठी, फक्त लिहा फॉन्ट-वजनतुम्ही साइटवर निवडलेल्या नंबरसह. माझ्या बाबतीत - 700 .

P(
font-family: "Open Sans", sans-serif;
फॉन्ट-वजन: 700;
}

ठळकपणाप्रमाणे, जर तुम्ही साइटवर ती निवडली असेल तर तुम्ही तिर्यक शैली देखील वापरू शकता.

ते वापरणे किती सोपे आहे गुगल फॉन्ट . शेवटी, हे सर्व फॉन्ट तुमची साइट लोड करतात हे सांगण्यासारखे आहे. हे करण्यासाठी, जेव्हा आपण साइटवर फॉन्ट निवडता तेव्हा उजवीकडे एक सूचक असतो जो दर्शवितो की पृष्ठ किती वेळ लोड होईल. संख्या खूप मोठी नाही याची खात्री करा आणि फक्त तुम्हाला खरोखर आवश्यक असलेले फॉन्ट वापरा. तुम्ही एकाच वेळी सर्व शैली निवडू नयेत, त्या किती उपयुक्त असतील हे तुम्हाला माहीत नाही.

तर ते झाले. आपले लक्ष दिल्याबद्दल धन्यवाद आणि लवकरच भेटू!