Don't Miss

How to Use Google Web Fonts in Blogger

By Zohaib Liaqat - 3 Comments
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.
How to Use Google Web Fonts in Blogger
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.
How to Use Google Web Fonts in Blogger
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.
How to Use Google Web Fonts in BloggerHow to Use Google Web Fonts in Blogger
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' />

How to Use Google Web Fonts in Blogger
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!

3 comments to ''How to Use Google Web Fonts in Blogger"

ADD COMMENT
  1. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  2. A devotion of thankfulness is all together for the standard blog. From the monster degrees of remarks on your articles, I think I am the basic a solitary having all the delight!Your blog is stunning! I'm in LOVE with it! Staggering affiliation a substance. Love your style, you shake!! You shake and please bear on the reimbursing work. I think this is pulling in and instructive material. Much appreciation to you such an awe-inspiring full scale for considering your substance and your per customers. (buy essays) Your blog held my use flawless to the plain end, which isn't everything seen as a sensible change!!

    ReplyDelete