वर्डप्रेस में फॉन्ट कैसे बदलें

अपनी वर्डप्रेस(WordPress) साइट में कुछ ब्रांडिंग और व्यक्तिवाद जोड़ने का एक शानदार तरीका है कि आप अपनी थीम में फोंट बदलें।

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

यदि आपने अभी -अभी एक वर्डप्रेस थीम स्थापित की है(installed a WordPress theme) या आपके पास कुछ सीएसएस(CSS) और कोडिंग का अनुभव है, तो हम आपको कई विकल्प दिखाएंगे जिनका उपयोग आप वर्डप्रेस(WordPress) में फोंट बदलने के लिए कर सकते हैं ।

वर्डप्रेस में फॉन्ट कैसे बदलें(How to Change Fonts in WordPress)

वर्डप्रेस में फोंट बदलने के लिए आपके लिए तीन मुख्य विकल्प उपलब्ध हैं:

  • Google Fonts , Fonts.com , या Adobe Edge वेब फ़ॉन्ट्स( Adobe Edge Web Fonts) जैसे वेब फ़ॉन्ट्स का उपयोग करें , जो किसी तृतीय-पक्ष साइट पर होस्ट किए जाते हैं
  • (Code)वेब फोंट को अपनी थीम में कोड करें और उन्हें कतारबद्ध करें
  • अपनी साइट पर फ़ॉन्ट होस्ट(Host) करें और उन्हें अपनी थीम में जोड़ें

1. वेब फ़ॉन्ट्स का उपयोग करके वर्डप्रेस में फ़ॉन्ट्स कैसे बदलें(1. How to Change Fonts in WordPress Using Web Fonts)

वेब फोंट का उपयोग करना, फॉन्ट फाइलों को डाउनलोड करने और अपलोड करने की तुलना में वर्डप्रेस(WordPress) में फोंट बदलने का एक आसान और तेज तरीका है ।

इस विकल्प के साथ, आप हर बार कोई परिवर्तन होने पर उन्हें अपडेट किए बिना विभिन्न प्रकार के फोंट तक पहुंच(access a variety of fonts) सकते हैं, और यह आपके होस्टिंग पर सर्वर स्थान को हॉग नहीं करता है। फोंट सीधे प्रदाता के सर्वर से एक प्लगइन का उपयोग करके या आपकी साइट पर कोड जोड़कर प्रस्तुत किए जाते हैं।

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

आप अपनी साइट पर कोड की कुछ पंक्तियों को जोड़कर वर्डप्रेस प्लगइन का उपयोग करके(using a WordPress plugin) या मैन्युअल रूप से वेब फोंट जोड़ सकते हैं । आइए दोनों विकल्पों का पता लगाएं।

वर्डप्रेस प्लगइन का उपयोग करके वेब फ़ॉन्ट्स कैसे जोड़ें(How to Add Web Fonts Using a WordPress Plugin)

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

  1. आरंभ करने के लिए, अपने WordPress व्यवस्थापक डैशबोर्ड में लॉग इन करें, और Plugins > Add New चुनें ।

  1. खोज बॉक्स में Google फ़ॉन्ट्स टाइपोग्राफी(Google Fonts Typography) टाइप करें, और अभी स्थापित करें(Install Now) चुनें ।

  1. सक्रिय(Activate) करें चुनें .

  1. Appearance > Customize पर जाकर Customizer को एक्सेस करें ।

  1. Google फ़ॉन्ट्स(Google Fonts) अनुभाग चुनें ।

  1. इसके बाद, फोंट की सेटिंग खोलने के लिए लिंक पर क्लिक करें और उन्हें निम्नानुसार कॉन्फ़िगर करें:
  • बेसिक सेटिंग्स(Basic Settings) के तहत , अपने बॉडी टेक्स्ट, हेडिंग और बटन के लिए डिफॉल्ट फॉन्ट सेट करें।

  • उन्नत सेटिंग्स(Advanced Settings) के अंतर्गत , अपनी साइट का शीर्षक और विवरण, मेनू, शीर्षक और सामग्री, साइडबार और पाद लेख कॉन्फ़िगर करें।

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

  1. आप यह सुनिश्चित करने के लिए कस्टमाइज़र(Customizer) में इन सेटिंग्स का परीक्षण कर सकते हैं कि वे आपकी इच्छानुसार काम कर रही हैं, और फिर प्रकाशित करें(Publish) का चयन करें ।

नोट : यदि आप (Note)कस्टमाइज़र(Customizer) में प्रकाशित करना का चयन करना भूल जाते हैं , तो आप अपने द्वारा किए गए सभी परिवर्तन खो देंगे।

कोड का उपयोग करके वेब फ़ॉन्ट्स कैसे जोड़ें(How to Add Web Fonts Using Code)

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

हालांकि, अगर आप वर्डप्रेस(WordPress) थीम डायरेक्टरी या कस्टमाइज्ड थीम से थीम का उपयोग कर रहे हैं तो आपको अलग-अलग कदम उठाने होंगे ।

यदि आपने वर्डप्रेस(WordPress) थीम डायरेक्टरी से कोई थीम खरीदी है , तो चाइल्ड थीम बनाएं(create a child theme) और फिर उसे style.css और functions.php फाइल दें। यदि आपके पास एक अनुकूलित थीम है तो यह आसान है क्योंकि आप अपनी थीम से स्टाइलशीट और फ़ंक्शन फ़ाइल को संपादित कर सकते हैं।

  1. आरंभ करने के लिए, Google फ़ॉन्ट्स(Google Fonts) लाइब्रेरी से एक फ़ॉन्ट चुनें, और इसे अपनी लाइब्रेरी में जोड़ने के लिए + (plus)

  1. इसके बाद, नीचे उस टैब का चयन करें जहां आपको अपनी साइट में जोड़ने के लिए कोड मिलेगा। एम्बेड(Embed) टैब के अंतर्गत फ़ॉन्ट एम्बेड(Embed font) करें अनुभाग पर जाएं । आपको Google Fonts(Google Fonts) द्वारा जेनरेट किया गया कोड मिलेगा , जो कुछ इस तरह दिखता है:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

नोट(Note) : हमने इस गाइड के लिए वर्क (Work) सेन्स(Sans) को चुना है, इसलिए आपके द्वारा चुने गए के आधार पर फ़ॉन्ट नाम आपके लिए भिन्न हो सकता है।

  1. कोड के इस भाग को कॉपी करें: https://fonts.googleapis.com/css2?family=Work+Sans

यह आपको तृतीय-पक्ष प्लग इन के साथ विरोध को रोकने के लिए Google फ़ॉन्ट(Google Fonts) सर्वर से शैली को कतारबद्ध करने की अनुमति देता है । यह आसान बाल थीम संशोधनों की भी अनुमति देता है।

  1. फ़ॉन्ट को कतारबद्ध करने के लिए, फ़ंक्शन फ़ाइल खोलें और निम्न कोड जोड़ें। ( लिंक को उस लिंक से बदलें जो आपको (Replace)Google फ़ॉन्ट्स(Google Fonts) से प्राप्त होता है ):

समारोह wosib_add_google_fonts() { (function wosib_add_google_fonts() {)
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style ('googleFonts');
}

add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

  1. यदि आप भविष्य में और फोंट जोड़ना चाहते हैं तो आप अपने फ़ंक्शन या उसी लाइन में एक नई लाइन जोड़ सकते हैं:

फ़ंक्शन mybh_add_google_fonts() { (function mybh_add_google_fonts() {)
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style ('googleFonts');
}

add_action ('wp_enqueue_scripts', 'mybh_add_google_fonts');

इस मामले में, हमने कैम्ब्रिया(Cambria) और वर्क सेन्स(Work Sans) फोंट दोनों को एनक्यू किया है।

अगला चरण फ़ॉन्ट को अपनी साइट पर काम करने के लिए अपनी थीम की स्टाइलशीट में जोड़ना है।

  1. ऐसा करने के लिए, अपनी थीम की style.css फ़ाइल खोलें और अपने वेब फोंट के साथ अलग-अलग तत्वों को स्टाइल करने के लिए कोड जोड़ें:

बॉडी { (body {)
फॉन्ट-फ़ैमिली: 'वर्क सेन्स', सेन्स-सेरिफ़; (font-family: ‘Work Sans’, sans-serif; )
}

h1, h2, h3 {
फ़ॉन्ट-फ़ैमिली: 'कैम्ब्रिया', सेरिफ़; (font-family: ‘Cambria’, serif;)
}

इस मामले में, मुख्य फ़ॉन्ट वर्क सेन्स(Work Sans) होगा जबकि हेडर तत्व जैसे h1, h2, और h3 Cambria का उपयोग करेंगे ।

एक बार हो जाने के बाद, स्टाइलशीट को सेव करें और जांचें कि क्या आपके फोंट उसी तरह काम कर रहे हैं जैसे उन्हें करना चाहिए। यदि नहीं, तो जांच लें कि स्टाइलशीट में फोंट को ओवरराइड नहीं किया जा रहा है, या अपना ब्राउज़र कैश साफ़ करें और पुनः प्रयास करें।

  1. यह सुनिश्चित करने के लिए एक बैकअप फ़ॉन्ट रखें कि विशेष रूप से पुराने उपकरणों, खराब कनेक्शन वाले उपयोगकर्ताओं, या यदि फ़ॉन्ट प्रदाता के पास तकनीकी समस्याएं हैं, तो फोंट को आसानी से प्रस्तुत या एक्सेस किया जा सकता है। ऐसा करने के लिए, स्टाइलशीट पर जाएं और सीएसएस(CSS) को संपादित करके निम्नानुसार पढ़ें:

बॉडी { (body {)
फॉन्ट-फ़ैमिली: 'वर्क सेन्स', एरियल, सेन्स-सेरिफ़; (font-family: ‘Work Sans’, Arial, sans-serif;)
}

h1, h2, h3 {
फ़ॉन्ट-फ़ैमिली: 'कैम्ब्रिया', टाइम्स न्यू रोमन, सेरिफ़; (font-family: ‘Cambria’, Times New Roman, serif;)
}

यदि सब कुछ ठीक है, तो आपकी साइट के विज़िटर आपके डिफ़ॉल्ट वेब फोंट देखेंगे, हमारे मामले में वर्क सेन्स(Work Sans) और कैम्ब्रिया(Cambria) । यदि समस्याएँ हैं, तो वे बैकअप फ़ॉन्ट देखेंगे, उदाहरण के लिए हमारे मामले में एरियल(Arial) या टाइम्स न्यू रोमन ।(Times New Roman)

2. फ़ॉन्ट्स को होस्ट करके वर्डप्रेस में फ़ॉन्ट्स कैसे बदलें(2. How to Change Fonts in WordPress by Hosting Fonts)

अपने स्वयं के सर्वर पर फोंट की मेजबानी करने से आपको अपने वेब फोंट के प्रदर्शन को अनुकूलित करने में मदद मिलती है, लेकिन यह तीसरे पक्ष की साइटों से संसाधनों को खींचने के बजाय इसे करने का एक अधिक सुरक्षित तरीका भी है।(a more secure way)

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

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

  1. इसके बाद, अपनी थीम पर फ़ॉन्ट फ़ाइल अपलोड करने के  लिए wp-content/themes/themename
  2. स्टाइलशीट खोलें और निम्नलिखित कोड जोड़ें (इस मामले में हम वर्क सेन्स(Sans) फॉन्ट का उपयोग कर रहे हैं लेकिन आप इसे अपने फोंट से बदल सकते हैं):

@font-face {
फ़ॉन्ट-फ़ैमिली: 'वर्क सैंस'; (font-family: ‘Work Sans’;)
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
फ़ॉन्ट-वजन: सामान्य; ( font-weight: normal;)
फ़ॉन्ट-शैली: सामान्य; ( font-style: normal;)
}

@font-face {
फ़ॉन्ट-फ़ैमिली: 'वर्क सैंस'; ( font-family: ‘Work Sans’;)
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
फ़ॉन्ट-वेट: बोल्ड; ( font-weight: bold;)
फ़ॉन्ट-शैली: सामान्य; (font-style: normal;)
}

@font-face {
फ़ॉन्ट-फ़ैमिली: 'कैम्ब्रिया'; (font-family: ‘Cambria’;)
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
फ़ॉन्ट-वजन: सामान्य; ( font-weight: normal;)
फ़ॉन्ट-शैली: सामान्य; ( font-style: normal;)
}

नोट(Note) : @fontface का उपयोग करने से आप अपने फ़ॉन्ट के बोल्ड, इटैलिक और अन्य विविधताओं का उपयोग कर सकते हैं, जिसके बाद आप प्रत्येक फ़ॉन्ट के लिए वज़न या शैली निर्दिष्ट कर सकते हैं।

  1. इसके बाद, अपने तत्वों के लिए स्टाइल इस प्रकार जोड़ें:

बॉडी { (body {)
फॉन्ट-फ़ैमिली: 'वर्क सेन्स', एरियल, सेन्स-सेरिफ़; (font-family: ‘Work Sans’, Arial, sans-serif;)
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
फ़ॉन्ट-फ़ैमिली: 'कैम्ब्रिया', टाइम्स न्यू रोमन, सेरिफ़; (font-family: ‘Cambria’, Times New Roman, serif;)
}

अपनी वर्डप्रेस टाइपोग्राफी को अनुकूलित करें(Customize Your WordPress Typography)

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

क्या(Were) आप इस मार्गदर्शिका में दी गई युक्तियों का उपयोग करके चरणों का उपयोग करके अपनी साइट के फ़ॉन्ट को अनुकूलित करने में सक्षम थे? हमें कमेंट में बताएं ।(Tell)



About the author

मैं एक सॉफ्टवेयर इंजीनियर और एक्सप्लोरर हूं। मुझे Microsoft Xbox 360 और Google Explorer दोनों का अनुभव है। मैं कुछ सॉफ़्टवेयर विकास टूल के लिए विशेषज्ञ अनुशंसाएं प्रदान करने में सक्षम हूं, साथ ही सामान्य एक्सप्लोरर त्रुटियों का निवारण करने में लोगों की सहायता करता हूं।



Related posts