There is vast number of fonts available on the Google web font’s collection. We can use these fonts in our blog and website to change the l...
There is vast number of fonts available on the Google web font’s collection. We can use these fonts in our blog and website to change the look of the old blogger body fonts like Arial, Trebuchet , Georgia etc. Fonts play an important role in the development of a blog. If your readers are not satisfied with the comfort of your selected font, they will escape without reading a single paragraph. But font is not only the option for making your blog good. There are some other reasons which I will discuss sometime that blog needs to be there. However, since, we are going to learn how to install fonts on blog we will try to make it as simple as possible for new bloggers.
How it works
It doesn’t need a complicated process. It can be done in a simple two step process. You can add a font anytime if it is mentioned in a Google web font directory. For finding if the font is available in the directory just hit this address.
http://www.google.com/webfonts
Step 1:
Select the font you want.Step 2:
Now click on quick use as shown in the screenshot |
| Click On Image to View Full size |
How to add font in the template
Step 1:
Copy the following code which the site has embedded for you. The code looks like thisScreen Shot<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
 |
| Click on Image to View full Size |
Step 2:
You need to make a little modification in it. Just close your tag with the ‘/’ at the end of the code.
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'/>
Step 3:
Now go to the Dashboard >> Template >> Edit Html >>ProceedStep 4:
Press ctrl+fStep 5:
Search for <head> and just below it, paste the above code. Screen Shot
 |
| Click on Image to View Full Size |
Now you need to make the change in your .post-body.
Code Application
Step 1:
Search for the .post-body or .post. You will find a code like this.
.post-body {font-family:Arial; font-size:12px; color:#333}If it is not present refer to my post How to change the text format of a blog. Here you will find a way.
Step 2:
Now copy the following code as mentioned in the screen shot
Paste it in the code like this
 |
| Click On Image to view Full Size |
Step 3:
Paste it in the code like this
 |
| Click on Image to View full size |
COMMENTS