How to Use Google Web Fonts in Blogger

There are millions of blogs on the internet, competing with each other. But it you want your blog to stand out and impress your visitors, then you've to make some changes to make your blog look different from others.
There are hundreds of elements that you can make different from others and one of them is your blogs font. Yes, you can make your blog look professional by using custom fonts.

Okay, you made this decision, but now you've to find a place where you can get free web fonts. I think that the best place for fonts is Google Web Fonts. Google Web Fonts inventory is full of gorgeous fonts that are extremely flexible and lightweight. There are over 600 fonts available in the Google Web Fonts. All of the fonts hosted, there are free to use in any commercial or personal projects.

Implementing Google Web Fonts in blogger is extremely straightforward. So if you are thinking to Add Google Web Fonts on your Blogger blog, then you're at the right place. Today we'll show you that How to Use Google Web Fonts in Blogger.

How to Use Google Web Fonts in Blogger

First of all go to http://www.google.com/fonts/. There are over 600 fonts available in the Google fonts. Okay now you've to choose your desired font, you'll see all the fonts with their previews and names. You can organize them by their font size and preview text. You can also sort them according to popularity, date added, alphabet, trending and by number of styles.

Once you've decided what font you want to choose click Add to Collection button and then click the Use button. It'll redirect you to the next page. From that page choose you font style i.e. light, normal or bold and scroll down.

After that you'll see the link to sylesheet, which would look like this:

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

And its CSS style which would look like this:

font-family: 'FONTNAME';

Copy the stylesheet and go to Blogger.com >> Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML (Don't forget to Backup your Template). Click inside the template code area, use Ctrl+F to search and search for the <b:skin> tag. Just above it paste your font stylesheet code.  
Note: To prevent any error, add a forward slash ( / ) before the closing bracket of the stylesheet code. See the example below:

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>
The above is the stylesheet provided by Google, before adding it to your blog add a forward slash ( / ) before the closing bracket like:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

Finally you've added the stylesheet. To use this font on a specific part of your blog, you've to add the CSS code to its element/code. Copy the CSS code provided by Google and use it where you want. See the example below:

.post-title {font-family: 'FONTNAME'; }
OR
.post-body {font-family: 'FONTNAME'; }

You can use this code anywhere in your blog, just add the CSS to the element where you want to use it. Click the Save Template button and you're done.

From Editors Desk

The method will be difficult for newbies, but if you follow the steps correctly, I don't think that you'll find any difficulty. Share your feedback and suggestions in the comments section below. Do share this article with your friends and don't forget to subscribe us!

Share This:

Tags:

Blog Design Blogger Tricks

• Prevoius
• Next