अपनी WordPress साइट पर कस्टम फ़ॉन्ट्स कैसे जोड़ें

अपनी WordPress साइट पर कस्टम फ़ॉन्ट्स कैसे जोड़ें

मानक फोंट का उपयोग करके अपने ब्लॉग को उबाऊ क्यों बनाएं? अपने ब्लॉग को अपने जीवंत व्यक्तित्व और उन विषयों के बारे में बात करने दें जिन्हें आप विभिन्न प्रकार के कस्टम फोंट के साथ कवर करते हैं। कस्टम फोंट एक अच्छी सुविधा है जो आपके ब्लॉग को दूसरों के लिए बेहतर दिखने की अनुमति देता है.


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

और यहाँ, दो सवाल उठते हैं – जहां कस्टम फोंट प्राप्त करने के लिए WordPress के लिए और कस्टम फोंट कैसे स्थापित करें आपकी वर्डप्रेस साइट पर.

चलो पता करते हैं.

Contents

 मुझे कस्टम फ़ॉन्ट्स का उपयोग क्यों करना चाहिए?

वे दिन गए जब टाइम्स न्यू रोमन और जॉर्जिया को वेबसाइटों पर ग्रंथों के लिए केवल फोंट माना जाता था। पिछले कुछ वर्षों में, फ़ॉन्ट स्थान Google फ़ॉन्ट्स और अन्य जैसे फोंट के आगमन के साथ पूरी तरह से बदल गया है.

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

इसलिए, इस पोस्ट में, आप सीखेंगे कि उपयुक्त कस्टम फोंट कैसे खोजें और उन्हें अपने वर्डप्रेस साइट में कैसे उपयोग करें.

कस्टम फ़ॉन्ट्स का उपयोग करने का महत्व

आप फ़ॉन्ट, शब्द, लाइन रिक्ति, पत्र रिक्ति, या फ़ॉन्ट संतृप्ति के बीच इंडेंट क्यों बदलते हैं? जैसा कि यह हो सकता है, कुछ अध्ययन यह साबित करते हैं टाइपोग्राफी पढ़ने की समझ में सुधार करता है.

बहुत कुछ फोंट के निर्माण पर निर्भर करता है। एक सचेत और अवचेतन स्तर पर – हर कोई डिजाइन द्वारा वेब पेज की सामग्री का मूल्यांकन करता है.

फ़ॉन्ट डिज़ाइन पाठकों को प्रभावित करता है, भले ही वे इस पर ध्यान न दें. फॉन्ट डिजाइन को त्यागने का मतलब है विकास को त्यागना! पाठक का मूड इस पर निर्भर करता है। फ़ॉन्ट या तो पढ़ना आसान बनाता है या उपयोगकर्ताओं को पृष्ठ छोड़ने के लिए मजबूर करता है.

सभी वेब ब्राउज़र में डिफ़ॉल्ट फोंट का एक सेट शामिल होता है। इसका मतलब है कि यदि पृष्ठ के सीएसएस में फ़ॉन्ट निर्दिष्ट नहीं किया गया है, तो मानक संस्करण का उपयोग किया जाएगा। आप हमेशा डिफ़ॉल्ट फोंट का उपयोग कर सकते हैं, लेकिन वे उपयोगकर्ताओं के काम को जटिल करते हैं। यही कारण है कि कस्टम फ़ॉन्ट का उपयोग करना आवश्यक है यदि आपका विषय आपको फ़ॉन्ट बदलने के लिए विकल्प नहीं देता है, तो कई वेबसाइट और उपकरण मदद कर सकते हैं.

Google फ़ॉन्ट्स विकल्प

जहां कस्टम फ़ॉन्ट्स खोजने के लिए

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

यहाँ कुछ है फ़ॉन्ट खोजने के लिए अन्य संसाधन मुफ्त और व्यावसायिक उपयोग के लिए:

  1. TemplateMonster – टेम्प्लेटमॉन्स्टर मार्केटप्लेस वेबसाइट पर, आपको वेब डिज़ाइन के लिए वह सब कुछ मिलेगा जिसकी आपको आवश्यकता है। थोड़ी कीमत के लिए व्यक्तिगत उपयोग के लिए कई फोंट और फ़ॉन्ट पैक भी हैं। इसके अलावा, वे एक वेब विकास किट में प्रस्तुत किए जाते हैं। संग्रह विशाल और रचनात्मक है। चुनने में आपकी मदद करने के लिए, ब्रोशर या फ़्रेम पर प्रस्तुत सभी फ़ॉन्ट। हर फ़ॉन्ट एक वाणिज्यिक लाइसेंस के साथ भी प्रस्तुत किया जाता है.
  2. MyFonts – MyFonts वर्तमान में दुनिया में फोंट का सबसे बड़ा चयन प्रदान करती है। हालांकि, यहां की कीमतें उच्च खंड में भी हैं। इसलिए, यदि आपके पास एक तंग बजट है, तो यह आपके लिए नहीं हो सकता है.
  3. FontSpring – फ़ॉन्ट्स का उपयोग वाणिज्यिक उपयोग के लिए फैंसी फोंट बेचता है। लेकिन लगभग किसी भी परिवार में 1-2 मुफ्त फोंट जिनका उपयोग व्यक्तिगत उद्देश्यों के लिए किया जा सकता है। इसके अलावा, मुफ्त फोंट के साथ एक अलग अनुभाग है। संग्रह जीवंत है। लेकिन आपको डाउनलोड करने से पहले किसी विशेष फ़ॉन्ट के लिए लाइसेंस की जानकारी का सावधानीपूर्वक अध्ययन करना होगा.
  4. Cufonfonts – यह विभिन्न फोंट का एक व्यापक संग्रह भी है। किसी भी का चयन करें, और आप इसके बारे में विस्तृत जानकारी के साथ एक पृष्ठ देखेंगे। बहुत सारे मुफ्त फ़ॉन्ट हैं, और वे अलग-अलग वर्गों में विभाजित हैं। CufonFonts पर छँटाई प्रणाली काफी लचीली और सुविधाजनक है। इसके अलावा, Webfont समर्थन शामिल है.
  5. Dafont – 3,500 मुफ्त फोंट का एक और सुलभ संग्रह। उनमें से ज्यादातर केवल व्यक्तिगत उपयोग के लिए डिज़ाइन किए गए हैं। एक अच्छी सुविधा DaFont एक श्रेणी प्रणाली है। आप कॉमिक्स, वीडियो गेम, विंटेज की शैली में फोंट का चयन कर सकते हैं या जापानी पात्रों के रूप में स्टाइल कर सकते हैं.

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

अब जब आपने साइट लेट का पता लगाने के लिए उपयुक्त फ़ॉन्ट का चयन कर लिया है कि इसे कैसे जोड़ना है.

वर्डप्रेस में कस्टम फ़ॉन्ट्स कैसे जोड़ें

वर्डप्रेस साइट पर फोंट जोड़ने के कुछ तरीके हैं:

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

विकल्प 1 – प्लगइन्स के साथ वर्डप्रेस फ़ॉन्ट्स बदलें

यदि हम वैश्विक परिवर्तनों की परवाह नहीं करते हैं, तो हम वर्डप्रेस प्लग इन स्थापित कर सकते हैं जो आपकी साइट पर फोंट बदल देगा.

कस्टम फ़ॉन्ट प्लगइन्स के लक्षण

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

यहां कुछ बिंदुओं को ध्यान में रखा गया है:

  • कस्टम फ़ॉन्ट का उपयोग करने की क्षमता
  • एक से अधिक फ़ॉन्ट का उपयोग करने की क्षमता
  • टार्गेट हेडर्स और कंपोनेंट्स
  • बोनस: दृश्य संपादक से फ़ॉन्ट सेटिंग्स बदलने की क्षमता

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

आइए वर्डप्रेस के लिए कुछ प्लगइन्स पर नज़र डालें जो आपको कस्टम फोंट अपलोड करने की अनुमति देते हैं.

कस्टम फ़ॉन्ट अपलोडर

कस्टम फ़ॉन्ट अपलोडर

यह प्लगइन आपको Google फोंट डाउनलोड करने और अपने ब्लॉग के विभिन्न तत्वों पर लागू करने की अनुमति देता है। उदाहरण के लिए, लेख या पृष्ठ के शीर्षकों या निकाय के लिए.

किसी भी फ़ॉन्ट का उपयोग करें

किसी भी फ़ॉन्ट का उपयोग करें

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

WP गूगल फ़ॉन्ट्स

WP गूगल फ़ॉन्ट्स

WP Google फ़ॉन्ट्स आपको Google फ़ॉन्ट कैटलॉग का उपयोग करने की अनुमति देता है। इस प्लगइन के अद्भुत लाभों में से एक 1000 Google फोंट के करीब है। जब आप Google फोंट मैन्युअल रूप से संलग्न कर सकते हैं, तो अधिकांश उपयोगकर्ताओं के लिए प्लगइन का उपयोग करना बहुत आसान है.

एक प्लगइन के साथ फोंट कैसे स्थापित करें?

उदाहरण के लिए, WP Google फ़ॉन्ट्स लें। बस इस प्लगइन को आधिकारिक वर्डप्रेस रिपॉजिटरी से इंस्टॉल करें और Google फ़ॉन्ट्स अनुभाग खोलें.

WP गूगल फ़ॉन्ट्स

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

विकल्प 2 – मैन्युअल रूप से वर्डप्रेस कस्टम फोंट स्थापित करें

@ फ़ॉन्ट-फेस निर्देश के माध्यम से, आप अपनी साइट पर एक या कई फ़ॉन्ट कनेक्ट कर सकते हैं। लेकिन इस पद्धति के अपने नियम और विपक्ष हैं.

पेशेवरों:

  • CSS के माध्यम से, आप किसी भी प्रारूप के फोंट को कनेक्ट कर सकते हैं: ttf, otf, woff, svg.
  • फ़ॉन्ट फ़ाइलें आपके सर्वर पर स्थित होंगी – आप तृतीय-पक्ष सेवाओं पर निर्भर नहीं होंगे.

विपक्ष:

  • प्रत्येक शैली के लिए सही फ़ॉन्ट कनेक्शन के लिए, आपको एक अलग कोड पंजीकृत करने की आवश्यकता है.
  • CSS को जाने बिना आप आसानी से भ्रमित हो सकते हैं.

लेकिन अगर आप कर सकते हैं तो यह एक वास्तविक समस्या नहीं है बस एक तैयार कोड कॉपी करें और जहां आपको अपने मूल्यों को निर्दिष्ट करने की आवश्यकता है.

ध्यान दें: शुरू करने से पहले, अपनी साइट के लिए चाइल्ड थीम बनाना सुनिश्चित करें। इस तरह से आप अपने चाइल्ड थीम के सभी संपादन कर सकते हैं, अपने मुख्य विषय को चातुर्य में छोड़ सकते हैं ताकि आप भविष्य में आवश्यकतानुसार इसे आसानी से अपडेट कर सकें।.

चरण 1: एक “फोंट” फ़ोल्डर बनाएँ

अपने बच्चे के विषय के अंतर्गत एक नया “फोंट” फ़ोल्डर बनाएँ: WP-सामग्री / विषयों / अपने-बच्चों के विषय / फोंट

चरण 2। डाउनलोड की गई फॉन्ट फ़ाइलों को अपनी वेबसाइट पर अपलोड करें

यह आपकी होस्टिंग के कंट्रोल पैनल या FTP के माध्यम से किया जा सकता है.

सभी फ़ॉन्ट फ़ाइलों को नए जोड़े गए फ़ॉन्ट फ़ोल्डर में जोड़ें: WP-सामग्री / विषयों / अपने-बच्चों के विषय / फोंट आपने बनाया.

चरण 3. चाइल्ड थीम स्टाइलशीट के माध्यम से आयात फ़ॉन्ट्स

अपनी चाइल्ड थीम की style.css फ़ाइल खोलें और सीएसएस फ़ाइल की शुरुआत में निम्नलिखित कोड जोड़ें (बच्चे के विषय पर टिप्पणी करने के बाद):

@फॉन्ट फ़ेस{
फ़ॉन्ट-परिवार: 'MyWebFont';
src: url ('फोंट / WebFont.eot');
src: url ('फोंट / WebFont.eot? #iefix') प्रारूप ('एम्बेडेड-ऑपेंटाइप'),
url ('फोंट / WebFont.woff') प्रारूप ('woff'),
url ('फ़ॉन्ट / WebFont.ttf') प्रारूप ('truetype'),
url ('फोंट / WebFont.svg # svgwebfont') प्रारूप ('svg');
फ़ॉन्ट-वजन: सामान्य;
फ़ॉन्ट-शैली: सामान्य;
}

कहाँ पे MyWebFont फ़ॉन्ट का नाम है, और src संपत्ति का मूल्य (उद्धरण चिह्नों में कोष्ठक में डेटा) उनका स्थान (सापेक्ष लिंक) है। हमें प्रत्येक शैली को अलग से निर्दिष्ट करने की आवश्यकता है.

चूंकि हम पहली बार सामान्य शैली को जोड़ते हैं, इसलिए हम फ़ॉन्ट-वजन और फ़ॉन्ट-शैली के गुणों को सामान्य पर सेट करते हैं.

चरण 4. जब जोड़ने इटैलिक, निम्नलिखित लिखें:

@फॉन्ट फ़ेस{
फ़ॉन्ट-परिवार: 'MyWebFont';
src: url ('फोंट / वेबफोंट-इटैलिक इट');
src: url ('फ़ॉन्ट्स / WebFont-Italic.eot? #iefix') प्रारूप ('एम्बेडेड- opypeype)),
url ('फोंट / WebFont-Italic.woff') प्रारूप ('woff'),
url ('फोंट / वेबफॉन्ट-इट्स.फेट') प्रारूप ('ट्रेटाइप'),
url ('फोंट / वेबफोंट-इटैलिक। एसवीजी # svgwebfont') प्रारूप ('svg');
फ़ॉन्ट-वजन: सामान्य;
फ़ॉन्ट-शैली: इटैलिक;
}

जहां सब कुछ समान है, केवल हमने फ़ॉन्ट-शैली की संपत्ति को इटैलिक से जोड़ दिया.

चरण 5. बोल्ड फ़ॉन्ट जोड़ने के लिए, निम्न कोड जोड़ें:

@फॉन्ट फ़ेस{
फ़ॉन्ट-परिवार: 'MyWebFont';
src: url ('फोंट / वेबफॉन्ट-बोल्ड.ऑट');
src: url ('फ़ॉन्ट्स / WebFont-Bold.eot? #iefix') प्रारूप ('एम्बेडेड- opypeype)),
url ('फोंट / WebFont-Bold.woff') प्रारूप ('woff'),
url ('फोंट / WebFont-Bold.ttf') प्रारूप ('truetype'),
url ('फोंट / WebFont-Bold.svg # svgwebfont') प्रारूप ('svg');
फोंट की मोटाई: बोल्ड;
फ़ॉन्ट-शैली: सामान्य;
}

जहाँ हम फ़ॉन्ट-भार गुण को बोल्ड करने के लिए सेट करते हैं.

प्रत्येक शैली के लिए फ़ॉन्ट फ़ाइलों के सही स्थान को इंगित करना याद रखें.

चरण 6. बोल्ड इटैलिक्स कनेक्ट करने के लिए निम्नलिखित टाइप करें:

@फॉन्ट फ़ेस{
फ़ॉन्ट-परिवार: 'MyWebFont';
src: url ('फोंट / वेबफॉन्ट-इटैलिक-बोल्ड.ऑट');
src: url ('फ़ॉन्ट्स / WebFont-Italic-Bold.eot? #iefix') प्रारूप ('एम्बेडेड- opentype'),
url ('फोंट / वेबफॉन्ट-इटैलिक-बोल्ड.वॉफ') प्रारूप ('woff'),
url ('फोंट / वेबफॉन्ट-इटैलिक-बोल्ड.ttf') प्रारूप ('ट्रेटाइप'),
url ('फोंट / WebFont-Italic-Bold.svg # svgwebfont') प्रारूप ('svg)';
फोंट की मोटाई: बोल्ड;
फ़ॉन्ट-शैली: इटैलिक;
}

खैर, यह सब �� अब आप अपनी वेबसाइट पर चार फ़ॉन्ट शैली से जुड़े हैं.

लेकिन एक टिप्पणी है – यह फ़ॉन्ट कनेक्शन इंटरनेट एक्सप्लोरर 8 में गलत तरीके से प्रदर्शित किया जाएगा। सांत्वना यह है कि 2018 का उपयोग करने वाले बहुत कम लोग हैं.

वर्डप्रेस के लिए कस्टम फ़ॉन्ट्स रैपिंग

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

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

यह सब टिप्पणी करने के लिए स्वतंत्र है. 

हमें यह सुनकर भी खुशी होगी कि आप अपनी वेबसाइट पर एक कस्टम फ़ॉन्ट जोड़ने के लिए कौन सा विकल्प चुनते हैं और आपको अपना फ़ॉन्ट कहाँ मिलता है.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map