How to Add Google Fonts to Blogger Blog

Bryce Zapanta
Bryce Zapanta
on July 11, 2012
How To Add Google Fonts to Blogger

Fonts style is one of the vital part of a blog. With the help of Google Fonts, you can now change your default font style in Blogger to any font that is available in Google Font.  Today, we will learn how to add Google Fonts to Blogger.

 
 
 
 
 
 

How to add Google Fonts to Blogger is very simple

The first thing we should do is pick any fonts in Google Fonts to be added in Blogger. You can see the list of Google Fonts here.

How to add Google Fonts to Blogger - List of Fonts

Once in Google Fonts, select any fonts you like to be added in Blogger. For tutorial purposes, we will select Squada One fonts in Google Fonts. Click the link “Quick-use”

How to add Google Fonts to Blogger - Google Fonts Codes

After that, copy the Google Fonts code for Squada One in a notepad temporarily. The code is something like this:

<link href=’http://fonts.googleapis.com/css?family=Squada+One’ rel=’stylesheet’ type=’text/css’ >

I also need you to copy the CSS code generated by Google Font, the code looks similar to this:

font-family: ‘Squada One’, cursive;

We’ll leave that Google Fonts Code for a moment and log in to our Blogger Account. Just to be sure that we won’t mess around and destroy our Blogger templates when we add the Google Fonts to it, we will Back up our template. We can back up the blogger template by following the image below:

How to Hide and Remove Blogger Navigation Bar - Blogger Back up Template

Save the backup file anywhere you prefer. We can now proceed on adding the Google fonts to blogger. Click on the Template link on the left side of your screen then Click Edit HTML and Proceed.

How to add Google Fonts to Blogger - Edit HTML Template

To add the codes of Google Fonts to blogger, find the HTML tag <head>. It’s usually at the top portion of the codes. If you’re having a hard time looking for it, you can just use the CTRL F function to find it.

Insert the  Google Fonts codes you have from Google Fonts to Blogger by pasting the codes right after the <head> tag. Once the Google Fonts code is pasted, modify it a little bit by adding / before the closing bracket (>). Your final Google Fonts codes to Blogger will looked like this:

How to add Google Fonts to Blogger - Paste Google Fonts Code right after Head Tag

Don’t forget to save your work!

How to use Google Fonts to Blogger

If you want to change the font style of your Blogger Post Titles using Google Fonts, look in your blogger template for the following codes:

.post h3 {

Then add the Google fonts style:

Font-family: ‘Squada One’, cursive;

Save it and view the changes in the Blogger post title of your blog.

If you want to change the font style of your Blogger Post Body or Post Content using Google Fonts, look in your Blogger template for the following codes:

.post-body {

Then add the Google font style:

Font-family: ‘Squada One’, cursive;

Save it and view the changes in your Blogger post body or content of your blog.

How to add Google Fonts to Blogger - Blogger Save Your Template

In this situation, since you’re already modifying your Blogger Post Titles and Post contents. You can also change how your Blogger Post Titles and Post Body’s appearance.

You can change its color, font-size, font-weight, add some text shadows and so on.

In this blogger tutorial, we have changed your old boring font styles with Google Fonts. I guess working on how to add Google Fonts to blogger is very easy, right? Have some errors? Cannot follow the instructions? Have questions? Tell us what’s your experience on adding Google fonts to blogger!

Watch out for our next Blogger Tutorial! Thanks!

Bryce Zapanta

Bryce Zapanta

is a graphic designer in a small sized printing company. He specializes on drawing caricatures for their client. He also works on the different layouts of greeting cards especially on weddings invitations (his favorite and area of expertise). During weekends, Bryce enjoys to spends his time going out of town and taking pictures of old houses and any wood carvings that fascinates him.

Leave a Reply