Google Fonts locally install करे और website की loading speed बढ़ाये! जानिए कैसे

नमस्कार दोस्तों, आपने google fonts के बारे में जानते ही होंगे। google fonts से अपने blog में आप अपने पसंद के fonts को install कर सकते है। कई WordPress themes में आपको google fonts का feature inbuilt मिल जाता है, जिससे आप दी गयी list से कई सारे fonts में से google font को चुन सकते है।

लेकिन google fonts को use करने से website की loading speed कम हो जाती है। Google fonts आप free में use कर सकते है। यह web fonts google के server में save रहते है। जब कोई user आपकी website open करता है तो http request के जरिये google web fonts render हो जाते है।

Geek Hindi की एक article में हमने देखा था कि कैसे आप 9 steps में website की loading speed को 90% तक बढ़ा सकते है। मेरी सलाह है की अगर आपने यह article पढ़ा नही है तो इसे नीचे दिए लिंक पर क्लिक करके जरूर पढ़ें।

जरूर पढ़ें – 9 steps में website page speed को बढ़ाये 90% तक

आज के article में हम देखेंगे कि google fonts locally कैसे install करें? इसके पहले हम जानेंगे कि google fonts के फायदे और नुकसान क्या है।

Google Fonts Advantages in Hindi. Google Fonts के फायदे।

1. Google fonts का इस्तेमाल करने का एक ही फायदा है, website में आप अलग अलग fonts को इस्तेमाल करके website की display को बेहतर बना सकते है।
2. Google fonts से title या heading के text में use करके आप इसे ज्यादा attractive बना सकते है।
3. कई बड़ी companies अपनी brand को बनाये रखने के लिए unique fonts का इस्तेमाल करते है। इसमें उन्हें google fonts का उपयोग होता है।

Google fonts Disadvantages in Hindi. Google Fonts के नुकसान।

1. जैसा कि हमने ऊपर जाना, Google fonts, google के web servers से render होते है। इससे website की loading speed काफी कम हो जाती है। आपने कई sites पर देखा होगा कि , साइट load होते समय , google fonts load होने में ज्यादा time लेता है।
2. google web fonts के इस्तेमाल से http request बढ़ जाती है, जिससे site speed कम हो जाती है।
3. GTmetrix page speed में आपको expire headers error आता है। google Page speed insight में भी cache validator error आता है।

नीचे दिये गए images में google pagespeed औऱ yahoo Yslow testing में google fonts से आने वाले errors दिखाए गए है।

जरूर पढ़ें – Website speed testing tools free

Google fonts locally install करने से google fonts आपके hosting server में save हो जाएंगे। इससे fonts बार बार render होने के बजाए user के browser में cache जाएंगे। और इसी तरह google fonts hosting server पर install करने से http request कम हो जाएगी और fonts cache होने से page speed बढ़ जाएगी।

Google fonts locally install करने से पहले आपको वेबसाइट में पहले से मौजूद google web fonts को disable/remove करना होगा।

How to disable Google fonts from WordPress? Google fonts को WordPress से disable कैसे करे?

Google fonts को WordPress theme से remove करने में लिए आपको theme के php files से google fonts की coding को remove करना होगा।

ऐसा करने के लिए आपको wordpress dashboard से appearance – editor में जाना है। google fonts की coding आपके theme के अनुसार header.php या functions.php में मिल जाएगी। अलग अलग theme के अनुसार यह coding अलग अलग हो सकती है। आपको यह coding ढूंढने के लिए header. php या functions.php में “google” या “font” सर्च करना है।
आम तौर पर यह coding कुछ इस तरह दिखाई देती है।

wp_register_style('Fontname', 'http://fonts.googleapis.com/css?family=some+Font:regular,600,600italic,bold');
wp_enqueue_style( 'Fontname');

यह कोड को remove करने पर theme से google fonts remove हो जाएंगे।

यदि आप theme code edit करने में समस्या है तो यह plugin install करने पर web fonts remove/disable हो जाएंगे।

How to install google fonts locally? Google fonts locally कैसे install करे?

Google fonts को अपने hosting server में install करने के लिए नीचे दिए गए 4 steps को follow करे।

1. Download google font

सबसे पहले आपको google fonts website से अपने पसंद का font select करना है। font select करने के बाद यह font के ttf, eot, woff, woff2 and svg जैसे अलग अलग versions को download करना है।
जबकि google fonts website में सिर्फ ttf fonts को ही download कर सकते है। इसीलिए आपको axellent.org की site पर जाना है। यहाँ से आपको सभी type के font version download कर सकते है।
सिर्फ font का ttf version सभी browsers में compatible नही होता। इसीलिए ttf,eot,woff, woff2 and svg version को download करने पर font सभी browsers के लिए compatible हो जाएगा।

2. Fonts को Hosting Server में upload करे

Download किये गए fonts को unzip करे। अब आपको यह fonts आपके theme directory में upload करने है। इसके लिए cpanel से file directory में जाये और नीचे दिया गया path follow करे।
public html – wp-content – themes – currently active theme

अब new folder option पर क्लिक करके नया folder create करे और इसे fonts नाम दे।
अब fonts folder को ओपन करे और upload button पर क्लिक करके download किये गए सारे font versions को upload करे।

3. Style sheet में fonts को add करे।

अब आपको theme के style sheet में font के call करने में लिए coding add करनी है। CSS3 में fonts को कॉल करने के लिए @font-face का इस्तेमाल किया जाता है।
अगर style.css में पहले से ही @font-face का इस्तेमाल किया है तो उसे remove करके अपने नए fonts के साथ update कर दे।

नीचे दिया गए code को <body>tag में copy करे।

@font-face {
font-family: 'Laila-Regular';
src: url('fonts/Laila-Regular.eot');
src: url('fonts/Laila-Regular.eot#iefix') format('embedded-opentype'), url('fonts/Laila-Regular.woff2') format('woff2'), url('fonts/Laila-Regular.woff') format('woff'), url('fonts/Laila-Regular.ttf') format('truetype'), url('fonts/Laila-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}

 

यह code में से Laila-regular को आपके font name से replace कर दे।

अब style.css को save करे।

4. Style sheet में font family को update करे

यह स्टेप में आपको style.css में font-family को update करना है और font के नाम को change करना है। ऐसा करने के लिए ctrl+s से search बार को ओपन करे और “font-family” word को search करे। आपके सामने कई सारे सर्च results yellow colour में आ जाएंगे। अब आपको एक एक करके सभी font-family के आगे font के नाम को अपडेट करना है।

जैसे – font-family : “Open Sans”; को अपडेट करके font-family : “Laila-Regular”; में change करे।

इसी तरह google fonts locally install हो चुके है। अब आप gtmetrix या pingdom tools में site speed को टेस्ट करके fonts.google या gstatic.google.com का error ना होने की पुष्टि कर सकते है। अगर आप cache plugin का इस्तेमाल करते है तो cache flush करना ना भूले।

जरूर पढ़ें – W3 Total Cache और Cloudflare की मदद से website loading speed कैसे बढ़ाएं?

मुझे उम्मीद है कि आपको यह article उपयोगी साबित होगा और google fonts locally install करके आप page speed बढ़ाने में सफल होंगे। अगर आपको किसी भी प्रकार की समस्या या सुझाव है तो comment के जरिए जरूर बताएं