For years, Bloggers and web-designers were using those simple web fonts to style their blogs and templates. They didn’t had an option to change those fonts as there were only some fonts accepted world-wide as web fonts. It was impossible to use another fonts on web pages as they would appear in ten monitors in ten different styles ! Their appearance may change in respect of the change in the OS, softwares … etc of that computers. So web-designers were trapped under those countable fonts…
But now Google has launched their new service Google web fonts with the slogan – ‘Making the Web Beautiful!’. This service will allow you to use custom fonts on google font directory on our blog/ websites without any sign-up or anything else. As it’s from ‘Google’, It doesn’t have any complications and it’s also completely free for commercial and private use.,No restrictions held or no harsh laws. This could make your blog look more stylish and is applicable for blogger blogs too. Don’t get amazed, It’s True ! I’ll show you how to do it with blogger.
Back-up Your blogger template
It’s always the first step for any blogger tutorial. I’ll be using this step as the first step for all my tutorials on allblogtools. You should always take a back-up of your blogger template before testing any hacks on blogger.
For this, go to Design or layout -> Edit HTML -> Download full template
Select your Font
For this, Go to
Google Font directory and select any one of those stylish font, which you want to use on your blog.
Get the Code for your Font
In this tutorial I’ll be using the Tangerine font, Which I liked the Most. For this just click on the name Tangerine and a new windows will open. Select The tab named ‘Get the code‘.
Add the Code to your Blogger template
Now you have to copy the Code they provide and you have to add the code to your blogger template, just after
<head>
tag of your blogger template.
The code may look something like;-
<link href='http://fonts.googleapis.com/css?family=Tangerine'
rel='stylesheet' type='text/css'>
Important : ?Please add a Forward slash (“
/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-
<link href='http://fonts.googleapis.com/css?family=Tangerine'
rel='stylesheet' type='text/css'/>
This is because blogger use XML for coding which won’t allow unclosed tags like this. So you have to close this tag by adding the forward slash.
Now Copy the code and paste it just after
<head>
It should be the first code after the
<head>
Section. Otherwise it could cause problems while displaying the text in IE and may be in Firefox.
Please remember to add the forward slash before the end tag. and now please click Save Template
now the code required for Google web font has been added to your blog. Now you have to can use google fonts in your blog by applying it on any widget tags.
Add the CSS code for Font to your Blog
Now the last and final step. In this step, you have to specify where you want to add the font and have to add the css code for it.
If you want to make the font appear for a specific sentence only in your blog post, then use the HTML code ;-
<div style="font-family: 'FontName', serif;">Your text</div>
in the above code change
FontName : to the font name that you chosen it from google.
Your text : to any text you want.
If you want the font to appear for your
- Blog titile
- Post title
- post body
- sidebar fonts
you have to add the CSS code for it. Don’t worry, It’s very very easy.
Here I’ll tell you How you can change your post title. For this you have to search for the title css code
.post h3
or
.post-title h3
This is the common css code for post title in blogger. now we have to add the css code for the new fonts for this code,. For this, add/modify these lines below the above codes.
font-family: 'Your Font Name';
The code should look something like ;-
.post h3 {
font-family: 'Your Font Name';
}
Here I had added the css code for Tangerine. You should post the css code between the “{” and “}” tags of .post h3. Like wise you can add the css code for other position too by modifying the css code.
Here i’ll mention the main positions and the common css code for each position. Please note that it may change if you are using any custom template.
- Title : h1
- Post title : .post h3 or .post-title
- Post font : .post-body
- Sidebar : .sidebar h2
the above tags helps you to change the font for any position of the above 4 tags.
for example, if you want to change the post font,
in the above table, you can see that the tag to edit for the post font, is .post-body
so you have to search for .post-body in your template, and below it, add the following line.
font-family: 'google Font Name';
the final code should looks like
The code should look something like ;-
.post-body {
font-family: 'Your Font Name';
}
These above values may change in some custom themes. But these are the common seen tags. If you didn’t find the tags with this, try searching similar tags.
