Add Google Web Fonts to Blogger

If you are looking for free open-source fonts to design your blog’s texts then nothing is better than Google web fonts. Blogger has been using Google web fonts for quite a long time, you can find it by clicking the Customize button found under Blogger Template tab of your blog.

But there aren’t many web fonts available to choose from as many as the font directory has, isn’t it? Or you have a custom Blogger template where you want to add web fonts. Let’s start with Merienda as our example font and see how we can add this to Blogger.

Step 1: After finding this font click on “Quick use”.

Step 2: You will be redirected to the next page where you have to choose the options for the font.

Choose the styles you want - Most of the time “Normal” works best and you need not to choose any other font styles (if not required) as to reduce the page load time and as also it can be done through CSS.
Choose the character sets you want - Don’t select anything here as I will come to this later.
Add this code to your website - Copy the code that you need to add to your template.

Step 3: Login to Blogger, go to Template tab and click “Edit HTML”.

Step 4: Find <head> and below it add the copied code as told in step 2.3 but here you have to also add a trailing slash (/) as shown below.

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

If the slash is not added at the end then you will get XML error while saving your template.

Step 5: Now you have to integrate the font through CSS by adding it just before ]]></b:skin>. For example, if you want the web font for the whole page then add:

body {
  font-family: 'Merienda', sans-serif;
}

Now suppose you want to integrate the web font for your post headings only then the code will be:

h3.post-title {
  font-family: 'Merienda', sans-serif;
}

Or suppose you want this for the blockquotes only then it will be:

.post blockquote {
  font-family: 'Merienda', sans-serif;
}

And if you want the web font to be italic then add the CSS property font-style: italic; to the definition.

Step 6: If it’s done then save your template.

Important notes:

You can add multiple web fonts to Blogger by selecting the fonts you want and again follow the steps from 1 to 6.
In step 2.2, for most of the time, “Latin” does the job and you don’t need to select any other character sets as it will increase the page load time. But if you need it no matter what then you can choose to have multiple character sets. In that case you also need to encode “&” sign (or ampersand) so that Blogger doesn’t give any XML errors while saving the template. It would be like:
```
<link href='http://fonts.googleapis.com/css?family=Merienda&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css' />
```

Loading Google Web Fonts Asynchronously

If you are an advance user and developer then you can use the Google JavaScript library instead of stylesheet link, also known as “WebFont Loader”, to load web fonts asynchronously. Find <head> within your Blogger template and simply add the below script.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Merienda::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

It is also possible to call and add multiple web fonts. See the example below:

WebFontConfig = {
  google: { families: [ 'Merienda', 'Droid+Sans' ] }
};

After this add the CSS as told in step 5 to style your texts.

Search This Blog

Simple Blogger Tutorials