Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How to Add Google Web Fonts to Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add Google Web Fonts to Blogger

How to Add Google Web Fonts to Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,911 views

One of the best open-source fonts available on the net is Google web fonts. If you want to add the web fonts to your customized template, Raju of Simple Blogger tutorials gives you a tutorial on how you can add it to your Blogger.

Using Exo as a sample font:

  1. Click “Quick use” after you find this font.
  2. You’ll be redirected to the next page where there are options for you to select a font.
  3. Choose the styles you want.
  4. Choose the character sets you want
  5. Add the code to your website.
<link href=’http://fonts.googleapis.com/css?family=Exo’ rel=’stylesheet’ type=’text/css’>

6. Login to Blogger, go to Template > Edit HTML
7. Look for <head> and below, copy code on step 2c. Add a trailing slash (/) at the end.

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

Note: If you don’t add the slash, you will get XML error while saving the template.

8. Integrate the font through CSS by adding it before ]]></b:skin>.

If you want the font for full page, add:

body {

 font-family: 'Exo', sans-serif;

}

If you want to integrate it for post headings:

h3.post-title {

 font-family: 'Exo', sans-serif;

}

For blockquotes:

.post blockquote {

 font-family: 'Exo', sans-serif;

}

If you want it to be Italic, add font-style: italic; to CSS.

9. Save template.

Note: Save backup first before making any changes on your template.

You can also add multiple web fonts by selecting your preferred fonts and following the steps Raju provided.

Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here