Free Google Fonts for Blogger–Custom Blog Design

Unknown

9:44 AM

Suitable custom blog design is really very important for Bloggers. You can enhance your blog beauty by adding different unique type of fonts. There are plenty of fonts out there, you can use them free of cost. You can use these fonts anywhere in your blog. It really doesn't matter if it's blog heading, paragraph, or a simple text logo. All you need is to follow this method and enjoy new fonts. You can read my previous article about custom blog design.

Why Custom Font?

Custom fonts can increase the beauty of site. You can use comic fonts if you are blogging about comics, in the same way you can use scary type of fonts if you are blogging about nightmares, and Halloween. You fonts say it all, you just have to find the best one for you.

How to Find Custom Fonts?

First of all you have to find the best font for your blog, go to Google Fonts. You will find so many awesome fonts here, just choose the best one and click on the icon as shown in the screenshot below.

After clicking this icon, you will find another page will the font option. You can check the font effect on your blog loading time on this page. This is indicated with a speed meter as shown in the image below. Read my another article about creating blogger own templates.

If you scroll down you will see font link and using tag something like this.

Now I am sure you know how you can use these fonts. Incase you don't know, allow me to explain more.

How to Use?

Now let me tell you the method of using these fonts in to the blogger. I assume you know how to backup your template, if you don’t know then read here to create a backup of your template.

Log in to your blogger
Select the blog which you want to change
Go to Template > Edit HTML to edit the template.

Search for </head> tag
Now paste the font code provided by Google just before this tag.

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

Now search for h1 tag if you want to use this font in the heading of your blog. You can use this tag as shown below.

h1,h2,h3,h4,h5,h6{font-weight:normal;margin:0;font-family:'Monda', sans-serif;color:#359bed; padding: 3px;}

In the same way you can use this font in the paragraph as well. Check this example below.

p{font-weight:normal;margin:0;font-family:'Monda', sans-serif;color:#359bed; padding: 3px;}

Using in Classes

I assume that you know how to use this in classes as well, simply use font-family:'Monda', sans-serif in the classes and use this font in your desired class.

Before You Go

Please always note the font effect on loading time of your website that is shown on the Google Font site. Always note the Speed meter, large fonts or fonts with multiple styles can decrease your site loading time.