Hello Gyanians, आज हम बात करेंगे fonts के बारे में और सीखेंगे की कैसे आप किसी भी blog पर use होने वाले fonts का पता लगा सकते हो और फिर कैसे अपने WordPress blog में google fonts को सही तरह से add कर सकते हो?
हम सभी bloggers चाहते है की हमारी site का look अच्छा लगे क्योंकि readers की attention पाने के लिए site का appearance and feel अच्छा होना बहुत जरुरी है और इसमें fonts (typography) का बहुत important role होता है.
By default हर sites में web safe fonts use किये जा रहें होते है लेकिन इनकी typography (style) बहुत boring होती है इसलिए अब ज्यादातर bloggers अपने blogs पर custom fonts का use करते है. आइये पहले हम समझते है की की web safe fonts और custom fonts में क्या difference हैं?
Web Safe Fonts और Custom Fonts में क्या Difference हैं?
Web safe fonts – ये fonts ज्यादातर हर device और OS में पहले से installed होते है जैसे की Arial, Times New Roman, Courier इत्यादि. इन fonts की typography को आप direct style.css file से code करके अपनी theme में use कर सकते हो.
Web safe fonts use करने का सबसे बड़ा ये फायदा होता है की readers के browser को आपकी site को visit करते समय fonts के लिए कोई extra http requests नही करनी पड़ती है और इससे आपकी site भी fast load होती है.
लेकिन web safe fonts में बहुत ही कम choice (6-8 fonts) होती है और इनकी writing styles भी ज्यादा अच्छी नही होती है इसलिए ज्यादातर bloggers अब इन boring web safe fonts की जगह custom fonts का use करते हैं.
Custom fonts – ये fonts पहले से किसी device और OS में installed नही होते है इसलिए इन्हें use करने के लिए पहले आपको इन fonts को अपने hosting server पर या किसी third-party server पर host (upload) करना होता है और अपनी site पर link करना होता है.
उसके बाद आप style.css file की help से custom fonts को use कर सकते हो और फिर जब कोई reader आपकी site को visit करेगा तो उनका browser आपके custom fonts को भी उनके browser में load करेगा जिससे की readers को भी same typography show होगी.
अगर आप भी limited boring web safe fonts की जगह अपनी पसंद का stylish custom fonts अपने WordPress या Blogger blogs पर लगाना चाहते हो तो इसके लिए Internet पर ऐसी बहुत सी sites है जो आपको free या paid custom fonts provide करती हैं.
अगर आप free custom fonts use करना चाहते हो तो सबसे best choice है Google Fonts क्योंकि google fonts में आपको 800+ fonts मिलती है जिसे कोई भी web developers बिलकुल free use कर सकता हैं इसलिए इस post में हम WordPress में google fonts को add और use करना सीखेंगे.
- Read: WordPress Comments Email Addresses Export Kaise Karte Hai?
- Read: WordPress Me Emojis Kaise Use Ya Disable Karte Hai?
- Read: Gravatar Kya Hai aur Gravatar Par Account Kaise Create Kare?
WordPress Blogs में Google Fonts कैसे Add और Use करते हैं?
Google fonts को WordPress blog में add करने के लिए सबसे पहले Google fonts की site पर visit करना होगा और फिर वहां आपको बहुत सारी font styles show होंगी और आप scroll करके या search करके अपना font search कर सकते हो.
Font search करने के बाद plus (+) icon पर click करके font को select करें और फिर font tray पर click करें जैसे की मैंने Gyanians पर use होने वाले Google Laila font को select किया है.
Font tray को maximize करने पर आपको font को अपने blog पर add करने का link और CSS style code show होगा और इन्ही दोनों code का use करके आप बहुत आसानी से WordPress blog में ये google fonts add कर सकते हो.
Google Fonts WordPress Blogs में कैसे Add करते हैं?
WordPress में आप google fonts को 3 तरीको से add कर सकते हो. First method है google fonts को download करके अपने server पर locally host करना, second method है WordPress plugins की help से add करना और last method है enqueue script code से google fonts को theme में add करना.
इस post में आपको मैं third method यानी enqueue script code से google fonts को theme में add करना बताऊंगा बाकी के दोनों methods को मैं next posts में आपके साथ share करूँगा.
Enqueue method से google fonts को WordPress में add करने के लिए आपको अपनी WordPress theme की functions.php file में नीचें दिया हुआ font enqueue function copy-paste (add) करना होगा.
1 2 3 4 |
function my_google_fonts(){ wp_enqueue_style('googleFonts','https://fonts.googleapis.com/css?family=Laila'); } add_action('wp_enqueue_scripts','my_google_fonts'); |
लेकिन इस code snippets में आपको अपने selected font का सिर्फ URL copy-paste करके change करना होगा जैसे मैंने google laila font का सिर्फ URL paste किया हुआ है.
Google Fonts WordPress Blogs में कैसे Use करते हैं?
अभी तक बताये गये steps से आप Google fonts को WordPress blogs में successfully add करना तो सीख गये लेकिन अभी ये font style आपके blog के front-end elements जैसे की paragraph (p), headings (h1-h6), anchor links (a) इत्यादि पर show नही होगी.
Google custom fonts style को show (use) करने के लिए आपको अपनी theme की style.css file में CSS code करना होगा जैसे अगर आप अपने blog के सभी elements पर google font style लगाना चाहते हो तो नीचें गये code snippets को अपनी theme की style.css file में copy-paste कर दीजिये.
1 2 3 |
* { font-family: 'Laila', serif; } |
इसी तरह अगर आप किसी specific elements जैसे की paragraph या headings पर google font style लगाना चाहते हो तो आप इनके लिए separate CSS code अपने style.css file में add कर सकते हो. मैंने Gyanians पर all elements वाले methods को follow किया हुआ है.
- Read: Kisi Blog Website Ki Using Technology Kaise Find Kare?
- Read: Font Awesome Icons Blog Me Kaise Add Kare?
- Read: WordPress Custom Shortcodes Kaise Banaye?
Hello Gyanians, मैं आशा करता हूँ की आपको ये “WordPress Blog Me Google Fonts Kaise Add Aur Use Kare?” post पसंद आई होगी. अगर आपको इस post से related कोई सवाल या सुझाव है तो नीचे comment करें और इस post को अपने दोस्तों के साथ जरुर share करें.
Bhai aap WordPress per PhD Kar lo
hahaha Thanks for suggestion …
Isse speed par fark padta h kya?
Aur kya iska plugin bhi use kr skte hai?
Yes brother, iska speed par thoda sa fark padtha hai .. main use karta hun aur mere blog ki speed 500ms hai .. to aap smjh skte ho ki itna frk nhi pdta … aur agr aap plugin ki help se karoge to jyada frk pdega.
Aapne Awesome font icon ke baare m btaya tha wo sahi rahega ya google fonts?
Brother Awesome fonts ka use hum icons show (add) karne ke liye karte hai or Google Fonts ka use text writing style change karne ke liye~
me yahi kahna chaunga.
you are the master of CSS and PHP
Thanks for compliments brother … keep visiting, keep supporting ~
aap apne blog article ko justify ka use kyo nah karte? keval aap hi nahi sabhi blogger justify ka use nahi karte. q ki justify ka use na karne par artcle ki kuch line choti hoti hai aur kuch line badi hoti hai aur vo dikhne me accha nahi lagta.
Muje bhi justify bahut jyada pasand hai but justify ko SEO ke liye jyada accha nhi mana jata isliye justify ka option hi editor se hta dia gya hai
bhi aap sabse alag ho
Thanks brother, keep supporting – keep visiting ~
Bahut Hi Neat and Clean Blog hai aapka…Sunder ..!
Thank you so much brother .. U don’t know but I’m your big fan, Keep visiting ~
Sir, asp bahut acchi taraha se samjhate hain. Aur sabhi points ki puri details k sath jankari dete hain. maine bahut sari site dekhi aur padhi par aaj tak kisi bhi site par aakpi taraha details me nahi samjhaya gaya hai.
Thanks u sir
Thank you so much for your compliments ~ keep visiting ~
Main godaddy par payment dekar apni E-commerce website banwana cahata hu aur online payment getaway ki service ko bhi activate krna cahata hu. kya aap help kr sakte hai. Mujhe iske liye kya karna hoga.
E-commerce website ke liye main apako Shopify plateform ya WordPress with woocommerce suggest karunga aur payment gateway k liye instamojo ya cc-avenue suggest karunga ~
nice post
Thanks ~
mere blog me post ka font change nahi hua
If u know about CSS selector u easily change ur post font … Otherwise learn first about selector
Nice post sir.
Kya koi aisi theme hai jisme Google laila font inbuilt aate ho?
Aap sabhi themes me bahut hi aasaani se font add kar skte ho .. isliye maine aisi theme kabhi search nhi ki ~
meine pahle bhi bola tha aur aaj bhi bol raha hu brother aapke post me kuch na kuch new jarur hota hai….aapke blog se mujhe hamesha kuch na kuch new sikhne ko milta hai…….aap aise hi new new topic par post karte raho brother……