Even More Fonts For Blogger With Google Web Fonts

Using the Blogger Template Designer, we can spruce up our blogs using any of the many custom fonts available. This selection is powered by Google Web Fonts, and offers a wide variety of styles for almost any type of blog.

However, if none of these fonts are suitable for your design, take a look at the huge selection (currently over 500) of freely available web fonts available from Google.

We can use any of these fonts in our Blogger templates by adding just a few lines of code. Here's how to use any Google Web Font in your Blogger template design in just a few simple steps.

Google Web Font Examples

Here are three examples of fonts which I've embedded in this post to demonstrate how to use Google web fonts with Blogger:

Fredoka One
Loved by the King
Codystar

The code examples provided below include references to these fonts. Be sure to use the code generated for your own font selections when adding to your own site!

Step One: Choose Your Fonts

Head on over to Google Web Fonts and browse through the huge selection of fonts available.

Add the fonts you'd like to use to your "Collection"; these will then feature in the blue "collection" kafe which appears at the bottom of the page (click on the title to reveal/hide this section).

Once you've selected the font(s) you'd like to use, click the Use button in the blue collection toolbar. Some fonts are available in different styles, so in the first section of this page you can select the styles for each font which you would like to use. You can also de-select fonts which you've added to your collection but no longer wish to use.

An indicator on the right demonstrates the impact of your font selections on the  loading time of your pages.

Step Two: Add a CSS Link to your Blogger Template

Next you'll need to add a link to the dynamic CSS file which will import your Google Web Font selections for use in your Blogger template.

On the Google Web Fonts page, scroll down to the third section which features the code you need to paste into your site:

Copy this code to your clipboard, or paste into a text file, to use shortly.

In a new tab, log into your Blogger dashboard and choose Template>Edit HTML. Then search for the opening <b:skin> tag.

Immediately above this line, paste the code you copied from the Google Web Fonts page. You'll need to "close" the CSS link tag with a forward slash or you'll receive an error message when you try to preview or save your changes.

To give you an example, here's the original code generated for the web fonts example in this post:

<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Loved+by+the+King|Codystar' rel='stylesheet' type='text/css'>

And here's the same code with the closing forward slash (highlighted in bold red):

<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Loved+by+the+King|Codystar' rel='stylesheet' type='text/css'/> 

Now save your template.

Step Three: Specify the web fonts in your CSS

The simpulan step is to specify the elements of your design where you'd like these fonts to appear by adding CSS to your template.

Scroll down near the bottom of the page on Google Web Fonts to see how each font should be referenced in your template and copy the "font-family" code for each of your fonts. You'll paste this into your CSS after allocating it to a specific element of your design (for example, the blog title, gadget headings and body text)

The best way to achieve this is by adding CSS code in the Advanced section of the Blogger Template Designer.

For example, to use Fredoka One for the blog title, I could add this code:

.header h1 {font-family: 'Fredoka One', cursive;}

 To add Loved By The King for gadget titles...

.widget h2 {font-family: 'Loved by the King', cursive;}

And to use Codystar for the main body text:

.post-body {font-family: 'Codystar', cursive;}

When pasting your CSS code using the Template Designer, you'll be able to see how these fonts will work in your design before committing the change as the preview section updates automatically when you add custom CSS code.

Furthermore, you'll still be able to change the font sizes using other sections of the Template Designer interface.

Don't forget to save your changes once you're happy with your new fonts!

Did you find this post useful?

I hope this tutorial was helpful in enabling the use of Google Web Fonts in your own Blogger template.

Feel free to leave your comments and suggestions below.