Sunday, January 27, 2013

Tips to Adding Google Fonts to your Blog - 7 Step Process

For those of you who lurk at my blog, you will see that every so often, I change an element to enhance the look of the blog.  Please note that I have not had an introduction to Wordpress blogs, but I know the following will work on the Blogger blogs.

First, find a custom font that you like and want to have on your blog.  The custom fonts that I use are on the Google Web Fonts page.  When you find a font that you like press the "add to collection" button.  I will usually add a few to my collection and then delete the ones by pressing the "x" that I do not think would look so good on my blog.

First Step. Once you find the title and the body fonts that you would like, go into the template section of blogger.  Before you make any changes, be sure to backup your blog.  The backup can be found in the template section (on blogger) at the upper right.  Download the template to your computer and then proceed.

Second step: At the top of the template section, you will see "edit html" which you should select.. Now press Ctrl +F  and search for "comments" or "post title" and search until you find something similar to what is below:

h3.post-title,.comments h4{
  font: $(post.title.font);
  margin: .75em 0 0;
font-family: 'Delius', cursive;
}

.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;
font-family: 'Short Stack', cursive;
}

The Delius font is the name of the font I chose for my titles and Short Stack is what I chose for my post body.

Step three. You will want to go to step 4 on the google font page to copy and then paste into your HTML (indicated above where the code should be placed.)

Step four. Next, you will want to go back to the google web fonts and make sure you only have the fonts that you want to use showing in  your collection.  Press the "use" button.  Go to step 3 on that page.  You will see that it shows you how it will slow down the loading time on your blog before step 3.  Take that into consideration.

Step five. If you accept that your blog may be slowed down, copy the link in step 3 for the font you want.  You will search, using Ctrl + F for "/head" in your HTML and you will see </head>.  Right above that you will paste the code into the HTML then save.

Step six:  After the 'text/css' it is very important to add a / or you will receive a parse error.  When you are done, it should look similar to below:

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

</head>


Step seven. Press save and then go to your home page in the browser. 

If you are satisfied, backup the new template.  If you are not satisfied, you can add any new font by deleting the old font name and inserting the new font name and adding the new link where your old custom font link was.

Two easy steps and you are done!

The other tips I will write about are backgrounds, image mapping, signatures, and choosing the layout that will fit your blog.

Share this with other users to help them out by using the buttons to the left or the toolbar below.

If you run into problems, let me know. 
Related Posts Plugin for WordPress, Blogger...