Google Web Fonts is a biggest treasure of awesome fonts but many bloggers doesn't know how to use Google Web Fonts in Blogger.Many of them may not heard about them.You can add and use Google Web Font in your blog very easily.Here I am giving some easy steps just follow them carefully and you can successfully use them in your blog.
How To Use Google Web Fonts In Blogger ?
Here are some simple steps to use Google Web Fonts In Blogger
- Choosing the font from Google Web Fonts.
- Getting the code for the font which you have choosed adding the it in template.
- Adding the CSS code.
1.Choosing The Font
To choose the specific web font go to Google Web Font Page and choose a font which like accross 444 fonts.
2.Getting The Code For Font
After choosing a font click on Quick Use button on right side of that box and scroll down th(See Image Below)
(Note: I have chosen Share as the font. The coding may vary depending upon the font you choose).
- Now go to Blogger Dashboard > Design > Edit HTML.
- Find for </head> tag and paste below code just before </head> tag.
(Note - Don't forgot to add </link> after the code)
Adding The CSS Code
If you wish to display these fonts as your POST TITLES, then declare them as follows.
.post-title {font-family: 'YOUR FONT NAME';
}
If you wish to have them displayed on the body section of your posts, then you need to edit your CSS for post body as follows.
.post-body {font-family: 'YOUR FONT NAME';
}
(Note: Replace YOUR FONT NAME with the font name you have chosen. In my case, it is Dancing Script. You have to remove the previous font style that existed on your template.)
Save your template.
The coding may vary depending upon the template. If you have some unique custom templates, then I'm sure the coding will be different. So, don't worry. Just mention your blog URL in comments and I will help you about customizations.Don't forget to share your views about this post.
http://technouniversityworld.blogspot.in
ReplyDeleteHow to Add the .Post-body code in my template. i can't understand that step
Hi,I have visited your blog.And I noticed that your are using h3 tag as a post title.Find below code in your template
Deleteh3.post-title {
font-size:24px;
color:#2d2c2e;
text-decoration:none;
margin:0 0 12px 0;
}
And replace it with
h3.post-title {
font-size:24px;
color:#2d2c2e;
text-decoration:none;
margin:0 0 12px 0;
font-family: 'YOUR FONT NAME';
}
Now replace your font name with the Google font name.
That's it...
Thank you Rahul
DeleteYou are welcome...
Deletehttp://johanclaeys.blogspot.com
ReplyDeleteHow to Add the .Post-title code in my template. i can't understand that step
already put the link tag with with closing link before ... but don't catch the rest of the step.
Hi Johan,
DeleteFirst find below code in your template
h3.post-title a {
font: normal bold 16px Verdana, Geneva, sans-serif;
color: #444444;
}
Now replace it with
h3.post-title a {
font-weight: bold;
font-size: 16x;
font-family: YOUR FONT NAME HERE;
color: #444444;
}
Now replace YOUR FONT NAME HERE with your google font name.
This works !! ... really apreciate your input... ! I have been wondering is there no other way in other to change the code? In e.g. by downloading the template and using local html (wysiwig) editors to search/modify the code? I allways have to scroll down the template and its really a tedious task to locate the code... in the Template ... Edit html straight in Blogger. On top of that there is no search built in to track and locate the code... in order to speed up.
DeleteJohan when you want to edit your template the just go to Edit HTML and hit CTRL+F a small search box will pop out then enter your search queries and hit the seach button.
DeleteIs this then the solution to make it work with the body tag?
Delete.post-body a {
font-weight: bold;
font-size: 16x;
font-family: YOUR FONT NAME HERE;
color: #444444;
}
The size works but doesn't change the font-family...
Rahul, I apreciate the solution with Ctrl+F didn't know this worked in Blogger.. was considering a copy / paste to an html editor ... :-).. great tip !
Delete@Johan - Sorry bro. I can't understand what are you asking ?Will you please explain it in brief ?
DeleteThis comment has been removed by the author.
ReplyDeleteSimply put I want to do the same (post.title) but this time for body-post.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteGo to Dashboard > Edit HTML
DeleteTake a backup of your template
find this code in your template
.post h3 a, .post h3 a:visited { color: #acadae; }
.post h3 a:hover { color: #555657; }
h3.post-title, .comments h4 {
font: normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
margin: .75em 0 0;
}
replace it with
.comments h4 {
font: normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
margin: .75em 0 0;
}
See the preview of the template it will work.Good Luck....
For some reason I couldn't find the entire code. This was all I could find:
Delete.post h3 a, .post h3 a:visited { color: $(post.title.color); }
.post h3 a:hover { color: $(post.title.hover.color); }
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
You have found below code in your template
Delete.post h3 a, .post h3 a:visited { color: $(post.title.color); }
.post h3 a:hover { color: $(post.title.hover.color); }
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
replace it with
.comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
take a preview if it it works then save your template.
I did this but I still couldn't get my post title to change. I think I'm just going to have to give up.
DeleteThis is final,Find this (or similar to this) code in template
Deleteh3.post-title {
font: normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif !important;
color: #abadae !important;
font-family: 'Great Vibes', cursive;
}
and replace it with below code
h3.post-title {
font-size: 30px;
font-family: 'Great Vibes', cursive;
color: #abadae !important;
}
If it doesn't work then download your template and send me @
ipparrahul@gmail.com
you can save your template as .txt format.
Hi Rahul,
DeleteThis also didn't work. I have emailed you my template. Just thought I would check to make sure you received it.
Thank you so much for your help! I really appreciate it!
I didn't received your template yet....
DeleteI sent earlier yesterday. I'll try again now just in case.
DeleteWhich font do you want to use?
DeleteDone.Check your mailbox.
DeleteI was able to enter the code for the font right above the head tag.
ReplyDeleteThe code for post titles looks very different on my blog, though, and I haven't been able to find a way to correctly add the .post-title code.
How would I change the .post-title code to use Leckerli+One font?
Thank you for this post & for your help,
Dawn
http://mamasmonkeys.blogspot.com
Follow below steps carefully,
Delete1. Add below code just above tag (Ignore this step if you have already done this step)
<link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'></link>
2.Now find below code in your template,
h3.post-title, .comments h4 {
font: normal bold 20px Leckerli+One;
margin: .75em 0 0;
}
replace it with below code
h3.post-title, .comments h4 {
font: normal bold 20px Leckerli One;
margin: .75em 0 0;
}
now if you wish to change your font-size then you can adjust 20px ass you wish.
Finally take a preview of your template and save it.
Thank you! I really appreciate it!
DeleteIt's my pleasure pal...
DeleteHello Admin,
ReplyDeleteI'm using h2 tag as post title, where do I find it.
Please Help me..
I will post a solution soon :)
DeleteHi Rahul,
ReplyDeleteI've figured out how to change my post title, tabs, and sidebar but for some reason cannot get my post body font to change to "Quicksand". Could you please help??
theangledcoast.com
Thanks!!
Add this code just before of </head> tag in your template
Delete<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
and take a preview,if its showing error while showing preview then use use below code instead of above,
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'></link>
remove extra space between link and href keep one space only
DeletePlease help me I also cant understood how to change the font of my blog past body please help
ReplyDeleteI did everything and it didn't make any changes. Is there something i did wrong?
ReplyDeleteAnd I wanted to use this font: font-family: 'Salsa', cursive;
ReplyDeleteRahul Brother Which Font You Are Using For Your Blog...???
ReplyDeleteName Of Font...(___)
hie! rahul i also couldn't understand that post.body step. my site : cheatandlearn.blogspot.in
ReplyDelete