How to Add Fonts to Blogger/Blogspot

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 this

<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>

Screen Shot

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 >>Proceed

Step 4:

Press ctrl+f

Step 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

Click On Image to view Full Size

Step 3:

Paste it in the code like this

Click on Image to View full size

You are all done!