Sunday, October 12, 2014

How To Use Google Web Fonts For Blogger



Blogger is one of the best platforms to create and manage blogs, even if you're a newbie as we can see the number of blogs raising rapidly. Okay, everybody know this, but the most common problem with mostly every blogger user is using perfect template for blog as it matters a lot. Template should be user friendly, its font should be eye-friendly and easy to read, it should also be responsive and some more features we want the template.

Everybody have got any blogger template to use in their blogs either they're beautiful or ugly but we're using them. But the main thing is content and there font matters a lot. If you're feeling that your blog doesn't have beautiful font than you should change the font immediately. Because in the blog, the main thing is content or articles and if you've used any bad font that makes the article difficult than definitely it will affect on your blog visitors and you might loose your visitors.

Changing font is blogger is not a big deal. We've great collection of web fonts available on Google Fonts for free from where you can pick up any font and start using it on your blog or web. Google Fonts is one of the most popular place for fonts and almost every website is using fonts from there because there fonts are great and are hosted on Google servers which are really fast. Implementing fonts in our blog is really easy, we just need to add a html link tag below <head> which calls the font to load in our blog and use font-family CSS property to call the font in any web element.

Don't worry, if you're a newbie and don't know how to change and use Google Fonts in your blog because below I'm going to show you step by step that how can we easily do that.

How To Change & Use Google Fonts in Blogger?


Okay, So here I'm going to divide the tutorial in two pieces just to let you understand it easily. In this part, we'll remove the existing font in your blog and in second part, we'll install and use new font. Let's get started.

1. Removing The Existing Font


  • Go To Blogger >>  Template >> Backup Your Template
  • Click Edit HTML and Search For The Following Code
fonts.googleapis.com
  • Mostly, This will be available below <head> of the templates.
  • After finding the above code, you'll see it in the html <link> tag like the image below. 
  • Just remove that html link tagline.
  • Save Template.

2. Installing New Font in Your Blog


  • Go to Google Fonts and find the best font that you want to use.
  • After choosing font, click on "Quick use" button, shown in the image below.
  • Tick mark all the styles
  • Scroll down and copy the html link tag code.
  • Go To Blogger >> Template >> Edit HTML
  • Search For <head>
  • Paste The Code Below It and Save Template.
  • If it gives error, try adding / before > at the end, after that ending will be like />.
  • Okay, now font is installed and lets call it in our template.
  • Come back to Google font page and scroll down more.
  • There, you'll see the block like below.
  • Copy that code and Go To Blogger >> Edit HTML
  • Search for body { or body{
  • There you'll see font-famiy:bla-bla-bla;
  • Remove that font-family property till semicolon and paste the new one there.
  • Save Template.
  • If the font is not working properly now than add the following code above ]]></b:skin>
body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {FONT FAMILY PROPERTY HERE!important}
  •  Paste the font family property in the highlighted and remove semicolon because we've added !important tag that will call the font importantly in the given areas.
  • Save Template 
  • You're Done!