How To Add Custom Fonts to Blogger with Google Web Fonts ?

Adding custom fonts to Blogger is made easy with the help of Google Web Fonts. After the launch, it has become famous within many web developers. You can choose a large variety of fonts to get the perfect style for your blog's text and the best part is that it's free and is hosted on Google's domain. You can easily change the font styles of different sections on Blogger.

So let’s start with the tutorial for Blogger to add web fonts by taking “Cantarell” as our example.

Choose the Web Font You Want to Add to Blogger

There are many collections of font styles. So first you have to choose the font from the Google font directoryand click the link as shown in the picture below to get the code and copy it to your clipboard.

Choose your custom font that you want to add to Blogger

Get the custom font code

Adding Google Web Fonts to Blogger

Blogger made it easy by introducing it in Template Designer but not all fonts are there that are in Web Fontsdirectory. So, you may want to add it manually to Blogger. To embed the custom fonts, go to Design > Edit HTML. As we all know that style sheets should stay in the head section of the template, so find for and immediately below it paste the Google font API code.

The whole code will look like:

/>

Note the slash (/), it is used so that you don’t get any parsed error while saving your template. So whatever font you use, don’t forget to add “/” just before closing “>” (without quotes).

Updated: While adding the Google Custom Font API you may get an XML error:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

XML error message: The reference to entity "subset" must end with the ';' delimiter.

This happens because of the “&” sign just before “subset”. So use “&” as shown in the snippet above.

Using Google Web Fonts on Different Sections of Blogger

First check if you already got headings definitions added in your template. These should be h1, h2, h3 and so on. If so, then you only have to add font-family property to the headings that you wish to use as custom web fonts.

h1 { font-family: 'Cantarell', arial, serif; }

Note that Cantarell has been put within quotes to work with the API.

Now suppose you want to style your blog’s title heading with custom font, then the whole code will be:

#header h1 {

margin:0 5px 0;

padding:0 20px .25em;

line-height:1.2em;

letter-spacing:.2em; font-family: 'Cantarell', arial, serif;

}

The same will be with your post titles:

.post h3 {

padding:0 0 4px;

line-height:1.4em; font-family: 'Cantarell', arial, serif;

}

And this also can be used for different sections in blogger, like in sidebar titles or blockquotes. Try adding the below CSS just before ]]>:

.post-body blockquote { font-family: 'Cantarell', arial, serif;

}

You can also use multiple fonts for each title heading. Just add the style sheets that you want and add as:

h1 { font-family: 'Lobster', arial, serif; }

h2 { font-family: 'Cantarell', arial, serif; }

If you are having problems regarding this or if you want to add Google Web fonts in specific sections on Blogger