Blog Me Google Fonts Kaise Install Kare – Full Guide in Hindi

Dear all bloggers aaj hum blog me Google Web Fonts install karne ke bare me bat karenge. Website me google font kaise install kare or apni site ke text format ka look behtar kaise banaye. Isse aapki site ka look better hoga or readers aapki site ko pahle se jyada pasand karenge. Google bahut sare web fonts offer karta hai or sabse achhi bat ye sab free bhi hai. Aap apni pasand ka font choose kar sakte ho. So aayiye jante hai site me google web font kaise install kare.

Kisi bhi site ka look behtar hona uski success ka ahem part hota hai agar aapki site ka look beautiful nahi hai to site par quality content hone par bhi audience site ko kam like karnege. So website or blog ka good looking hona bahut hi jaruri hai. Google web fonts se aap site ke text version ka look change kar sakte ho or apni site ke design ko or jyada behtar bana sakte ho.

• Website Ya Blog Design Me Hone Wali 10 Common Mistakes

Isse pahle bhi main Computer Me Google Font Download Kar Install Kaise Kare ke bare me bta chuka hu. So agar aap apne PC me google fonts install karna chahate hai to ye post read kar sakte ho. Isse aap photo editor software like photoshop me usi style me words likh sakte ho. Agar aapke desktop me hindi language nahi hai to aap google hindi font bhi install kar sakte hai.

Website Me Google Web Fonts Kaise Install Kare – Step By Step Guide in Hindi

Agar aap WordPress user hai to aap plugins istemal karke easily google fonts ko WordPress blog me install kar sakte ho. Iske liye aap Easy Google Fonts plugins use kare. But agar aap blogspot user hai ya direct CSS coding ke throw blog me google web font add karna chahate hai to niche btaye steps follow kare.

Step 1:

First aap Google Fonts website par jaye. yaha aapko bahut sare fonts milenge. Aap categories, Trending and Language ke anusar font search kar sakte hai. Top categories ye hai.

• Serif
• Sans Serif
• Display
• Handwriting
• Monospace

Sath hi aap search box ke through bhi font search kar sakte hai. Aap inme se apni pasand ka font search kare or usme “+” ke icon par click kare. Uske bad bottom me ek black pop up board show hoga us par click kare.

1. Click on Plus Icon in fonts.
2. Click the Black Board in bottom.

Step 2:

Ab yaha par aapko Embed, Customize, Standard and @Import ke 3-4 options milenge. In options se aap fonts ko customize kar sakte ho. Jaise aapko font-weight change karna ho ya font ki language change karni hai to aap customize option par click kar sakte ho. Font-weight me aap font ko small, smaller, bold, bolder and boldest bana sakte ho. Mere hisab se aap regular 400 select kare.

Ab aapke pas 2 option hai ek aap direct google fonts ko blog me add kar sakte hai or dusra aap CSS code ke through google fonts ko site me add kar sakte hai. Main yaha aapko dono tariko ke bare me bta raha hu.

Method 1: Add Google Fonts on Site Directly

Is option me aapko jyada steps follow nahi karne hai. Aap only 2 steps follow kar site me google font use kar sakte ho.

1. Add Stylesheet URL On Site Header:

Isme fonts ka stylesheet link diya hota hai. jise aapko direct apni site ke </head> section ya </body> section me add karna hota hai. Is code ko aap apne blog ke </head> section ya </body> section me paste kare.

<link href="https://fonts.googleapis.com/css?family=Fauna+One" rel="stylesheet">

2. Change font-family on CSS:

Ab apne blog ki CSS file open kare or ye code paste kare. Agar CSS coding me koi or bhi font-family add hai to use replace kar le warna fonts work nahi karega.

body {
 font-family: 'Fauna One', serif;
}

Agar aap blogger user hai to Blog dashboard >> Template >> Edit HTML section me ja kar CSS coding me ye code add kare or agar aap WordPress user hai to aap WordPress dashboard >> Appearance >> Editor option par ja kar style.css folder me ye code add kare.

Method 2: Install Google Fonts on Your Site Using Only CSS

Sirf CSS code ka istemal kar google fonts blog me kaise add kare. Agar aap blog par extra script and stylesheet file use nahi karna chahate ho to aap unly CSS coding ki help se bhi google fonts ko blog me use kar sakte ho.

1. Add style URL in CSS file using @import:

Iske liye aap stylesheet code me diye gaye URL ko apne blog ki CSS file me is type se add kare.

@import url('https://fonts.googleapis.com/css?family=Fauna+One');

Isme se aap Fauna+One ki jagah wo font-family add kar le jo aap use karna chahate hai. Agar aap is tarah se font-family CSS code me add nahi karna chahate to aap ye dusri method follow kare.

2. Add Fonts Only CSS Code:

Second method me aap google fonts stylesheet code me diye gaye link ko open kare usme jo CSS code mile wo aapko blog ki CSS coding me add karna hai.

Like yaha “Fauna One” code ka URL diya hai use open karne par ye CSS code milta hai. Is code ko copy kar apne blog ki CSS file me add kare.

@font-face {
 font-family: 'Fauna One';
 font-style: normal;
 font-weight: 400;
 src: local('Fauna One'),local('FaunaOne-Regular'),url(https://fonts.gstatic.com/s/faunaone/v4/ev-FaPpZYwwjm7lSlYKlFRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 unicode-range: U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
 font-family:'Fauna One';font-style:normal;font-weight:400;src:local('Fauna One'),local('FaunaOne-Regular'),url(https://fonts.gstatic.com/s/faunaone/v4/cSd7NBXNFQWK4oX1706dY1tXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215
}

3. Replace Other Font-family to your Font-family:

Ab CSS file me or kahi bhi font family add hai to use change kar le. Finally, all process complete ho gayi hai. Ab aap apni site ko open kare or Ctrl+F5 key button daba kar page refresh karke dekhe aapki site ki font style chage ho gayi hai.

• Website Ki Design Responsibility Test Karne Ki 5 Useful Tools

Is tarah se aap apni site me google fonts ko easily install kar sakte hai or apni site ka look behtar bana sakte hai. Agar aapko ye post pasand aayi hai or aap isi tarah ki blog design wali post read karna chahate hai to aap humari Blog Ko Acha Design Karne Ki 20 Important Tips Janiye Hindi Me post read kar sakte hai. Isme aapko blog me jaruri design karne ki jankari milegi.

Agar aapko is process me koi problem ho to aap comment me apni problem bta sakte hai sath hi is post ko share jarur kare.