How to Add Fonts to WordPress Without Plugin

[vc_row][vc_column][vc_empty_space][vc_column_text]

How to Add Fonts to WordPress Website Without Plugin?

अपने वर्डप्रेस वेबसाइट को आकर्षक बनाने के कई तरीके उपलब्ध है, उन में से एक यह है की आप अपने वर्डप्रेस वेबसाइट Custom Fonts Add कर सकते है। जब आप बिना किसी कस्टम फॉण्ट ऐड किये वर्डप्रेस पर काम करते है, तो सिस्टम डिफाइंड कुछ फोंट्स होते है वही आपके वेबसाइट पर लागु हो जाते है। हालाँकि आप कस्टम फोंट्स ऐड करके अपने वेबसाइट को बेहतर बना सकते है। 

इस आर्टिकल में आप जानेंगे की एक वर्डप्रेस वेबसाइट में फोंट्स कैसे ऐड कर सकते हैं और उनका इस्तेमाल कैसे कर सकते है।

[/vc_column_text][vc_empty_space][vc_column_text]

Fonts कहा से Download करें ?

इंटरनेट पर कई सारे वेबसाइट Font Download के लिए उपलब्ध है। सभी फोंट्स फ्री नहीं होते है और कुछ फोंट्स को यूज़ करने के लिए ऑथर से स्पेशल परमिशन की जरुरत होती है।  फिर भी ज्यादातर फोंट्स पर्सनल यूज़ के लिए ओपन होते है और आप उनका इस्तेमाल अपने प्रोजेक्ट में कर सकते है।

निचे कुछ वेबसाइट दिए गए है, जहा से आप fonts download कर सकते है।

1. Google Fonts
2. Font Squirrel
3. Hindi Fonts
4. Edge Web Fonts
5. Typing Guru

[/vc_column_text][vc_empty_space][vc_column_text]

Converting Fonts to a Web-Friendly Format

हमेशा ऐसा नहीं होता की आपके कस्टम फॉण्ट को कोई भी वेब ब्राउज़र सपोर्ट करेगा। इसलिए करेंगे ऐसा नहीं है। वेब ब्राउज़र के लिए कम्पेटिबल फॉर्मेट में कस्टम फॉण्ट को कन्वर्ट करना होता है, तभी आपका फॉण्ट सभी browsers में काम करे।

कस्टम फोंट्स को कन्वर्ट करने से पहले, सभी उपलब्ध फॉर्मेट की जानकारी होना आवश्यक है –

• Open Type Fonts (OTF) – सबसे अधिक उपयोग किए जाने वाले वेब फोंट और माइक्रोसॉफ्ट के एक पंजीकृत ट्रेडमार्क हैं। यह फॉर्मेट लगभग सभी प्रमुख ब्राउज़रों के साथ अच्छा काम करता है।
• True Type Fonts (TTF) – 1980 में Microsoft और Apple द्वारा विकसित। व्यापक रूप से Windows और macOS दोनों के लिए उपयोग किया जाता है।
• Web Open Font Format (WOFF) – वेब पेजों के लिए व्यापक रूप से प्रयुक्त प्रारूप और वर्ल्ड वाइड वेब कंसोर्टियम (W3C) द्वारा recommended .
• WOFF 2.0 – बेहतर कम्प्रेशन क्षमताओं के कारण WOFF 1.0 से बेहतर विकल्प माना जाता है। यह प्रारूप सफारी और इंटरनेट एक्सप्लोरर द्वारा समर्थित नहीं है, लेकिन Google क्रोम, फ़ायरफ़ॉक्स या ओपेरा के साथ अच्छी तरह से काम करता है।
• Embedded OpenType Fonts (EOF) – अधिक कॉम्पैक्ट OTF  फोंट, वेब पेजों पर एम्बेडेड फोंट के रूप में उपयोग किए जाते हैं। सभी प्रमुख ब्राउज़र EOF का समर्थन करते हैं।

[/vc_column_text][vc_column_text]

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

[/vc_column_text][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][vc_column_text]

Manually Add Custom Fonts to WordPress?

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

Step by step process to add fonts manually to your WordPress Website –

1. Manually Fonts add करने के लिए पहले ऊपर दिए गए वेबसाइट में से अपना पसंदिता Font Download करे।
2. डाउनलोड किये गए फोंट्स को wp-content/themes/active-theme-name/assets/fonts/ फोल्डर में अपलोड करें। यहाँ active-theme-name का मतलब आपके वर्डप्रेस वेबसाइट में वर्तमान में एक्टिवेटिड थीम। 
3.  एडमिन डैशबोर्ड से Theme Editor में जाकर style.css फाइल में निचे दिया हुआ कोड ऐड करे। 

[/vc_column_text][vc_column_text]

@font-face { 
font-family: Aguafina Script-Regular; 
src: url(http://yoursite.com/wp-content/themes/twentynineteen/assets/custom-fonts/hello-stockholm.ttf); 
font-weight: normal; 
}

[/vc_column_text][vc_column_text]

4. कोड पेस्ट करने के बाद फाइल को Update करना ना भूले।  

[/vc_column_text][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][vc_column_text]

Font Add करने के बाद कैसे इस्तेमाल करें ?

जब भी कोई विजिटर आपके वेबसाइट पर आकर विजिट करता है, हर बार font-face कोड कस्टम फॉण्ट को लोड करता है, जबकि आप उस कस्टम फॉण्ट को किसी एलिमेंट के साथ इस्तेमाल भी नहीं कर रहे है।  इसका प्रभाव आपके वेबसाइट स्पीड पर भी पड़ता है और Page Loading टाइम बढ़ जाता है। 

इनस्टॉल किये गए कस्टम फॉण्ट का उपयोग करने के लिए आप CSS Class की मदद ले सकते है।  उदा. मैं, सभी H2 हेडिंग्स को Anton-Regular फॉण्ट अप्लाई करना चाहता हु, तो  मुझे निचे दिया हुआ कोड style.css फाइल में लिखना होगा । 

h2  {
font-family : "Anton-Regular"; }

[/vc_column_text][vc_empty_space][vc_column_text]

आप पेज बिल्डर (Visual Editor) उपयोग करके कंटेंट लिखते वक्त भी कस्टम फोंट्स को एलिमेंट्स को असाइन करा सकते है। इस तरीके को Inline CSS Method कहा जाता है। 

उदा. एक पैराग्राफ लिख रहा हु अउ उस पैराग्राफ को मेरा अपलोड किया हुआ कस्टम फॉण्ट असाइन करना चाहता हु, तो मेरा पैराग्राफ एलिमेंट के साथ कोड कुछ निचे के तरह होगा। 

<p style="color:green; font-family:Anton-Regular;">मेरे पैराग्राफ का कंटेंट यहाँ। ... </p>

[/vc_column_text][vc_empty_space][/vc_column][/vc_row]