How To Install Google Web Fonts On Blogger BlogSpot?

Advertisements
Those days have become history when people were utilizing similar fonts on their website. Nowadays, we can easily integrate multiple web fonts in a website without facing any problem whatsoever. You can host your personal fonts on your server, paying for a web font service, or can utilize the wide range of Google Web fonts on your website without even spending a single piece of penny. We would recommend you to go with Google Web Fonts because their inventory is full of gorgeous fonts that are extremely flexible and lightweight. Things cannot get better than this. If you are thinking to install Google Web Fonts on your Blogger BlogSpot Site then, this article might turn out to be a treasure for you. Today we will learn How You can Integrate Google Web font in Blogger hosted website.

Currently, Google fonts is the largest online web font’s inventory, which has almost 500 Different font families that have more than thousands of different fonts. The implementation is extremely straightforward, and when we have the Power of Google API then we get some extra benefits of Google’s fast and reliable servers.

How To Install Google Web Fonts on Blogger Hosted Site:

There are numbness ways through which we can integrate the Font’s API in our blog. However, we are trying to focus on that method which we have termed as a standard way. Just follow the following steps carefully.
Step#1: Go To Google Web Font Inventory and you will be able to witness an enormous inventory of Free web Fonts. This is fun because you integrate the best thing into your website. You can utilize the Preview area to input your own TEXT so you can feel the fonts in real time. 
Step#2: In this case, we have copied and pasted the chunk of Text that we would be replacing with the new font. If you have discovered your dream font which will suit your blog template, then Press Quite use button and proceed to the next step.
Step#3: Now select the size of your font that will suit the needs of your blog. You have the freedom to choose more than one, but this will decrease your page speed with the increase in the font size. There is a Page Speed meter beside the styling option which shows its speed.
Step#4: Then Scroll down and you will Notice a CSS StyleSheet file (Actually it is the CSS of the font) Copy this line of code to your clipboard by pressing CTRL+C buttons. Once you have successfully copied the code proceed to the next step.
Step#5: Now Go to Blogger.com >> Template >> Edit HTML >> Proceed. Search for </head> and above it paste the CSS Style Sheet code that you copied one step earlier. After pasting the code Press the Save template button. 
  • Remember: Don't forgot to add </link> (ending tag) after the Font CSS coding. For Example check the following coding.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'></link>


How to Integrate The Fonts Into Your Blogger CSS:

To execute the font, you have to integrate it with your CSS. Since, we are integrating it on a Blogger Platform so have to do everything manually. Following are the few methods of doing that.
  • For Post Titles: If you want to implement any font on your Post Titles then within you will use the following CSS.
.post-title {font-family: 'FONT NAME'; } 


  • For Post Body: If you want to use it in your post body then you will use the following CSS.
.post-body {font-family: 'FONT NAME'; }


  • For Specific TEXT: If you don’t want implement the font style on a certain chunk of text then utilize the following code. You can use this code in the Blogger post Editor.
<span style="font-family: FONT NAME;">Your-Text-Here</span>


The Final Result:

In case you are unable to see the results that you were expecting then following are the few reasons.
  • If you website is already open in a tab, then makes sure you reload (refresh) it.
  • Make sure that the Google API is working perfectly.
  • Sometime browser catches the cache (history) so remove all the browsing data.
  • Make sure you are using an advanced browser (Don’t use internet explorer).

From The Editor’s Desk:

The method will be difficult for those who have less or now knowledge about CSS. However, if you follow the steps as it is then we are pretty sure that you will not face any difficulty whatsoever. Though, there are many tutorials regarding this specific topic, but we tried to make things as straightforward as we can. If you still have any confusion feel free to drop your question. Take a lot care of yourself till then peace, blessings and happy blogging.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

13 comments

October 16, 2012 at 3:49 PM

great bro thankx for that.......i really liked this post ......great. N bro must see my blog 2 h7ackers.blogspot.com n h7bloggerthemes.blogspot.com Thank You

October 16, 2012 at 10:28 PM

Awesome Post bro Thanks For Sharing this post. i was being Searched this. :)

Regards
Rahul Kashyap
Blog: SDMMovies.com | Movies4u.us/

October 17, 2012 at 4:08 AM

Nice post. It is very useful information for everyone. Good points. These are simple ways to consider a website.
Web Designing Services

October 17, 2012 at 4:30 AM

Nice info.Sorry for off topic but i think you are not responding to MBL LIVE HELP emails.Because i have sent 2 mails yet through this service one of which is sent recently and other one was almost 2 month old.But i didn't get any reply yet.One of my best reason to follow your blog is that you respond to every valuable comments and i expect from live help too.I know you are busy blogger but i hope you will take care of us.

October 17, 2012 at 5:22 AM

Hey i am using your navigation style , i hope you dnt mind

Editorial Team MOD
October 17, 2012 at 1:15 PM

Thanks for liking the article buddy. We checked your Site. Keep on concentrating on your content. Peace and Blessings

Editorial Team MOD
October 17, 2012 at 1:17 PM

Oh, Yes Brother Last Night I Recived your HELP Request but that time I Was busy with some other Activities. Sorry, If you let you down and we will try to send more quick replies.

We have Send answers to your Emails.

Peace

November 27, 2012 at 2:06 PM

the articles was good

Plz check my blog at www.thinkdigitalworld.com

and can u share which template u are using

March 18, 2013 at 2:58 AM

Do you think it's possible to add all google web fonts automatically to the blogger template designer so you don't have to add the code manually to the html.

Editorial Team MOD
March 18, 2013 at 6:08 AM

Yes you can, but most of the Custom Blogger Template don't support Template designer so for that reason you have to install it manually.

March 22, 2013 at 6:48 AM

Do you know how I can load extra google web fonts in the template designer?

Editorial Team MOD
March 22, 2013 at 11:16 AM

Nope, you cannot load Extra Fonts. You have to add them manually by following the steps mentioned in the tutorial.

August 8, 2013 at 8:54 PM

Hi. I just tried this method to replace some text in a post with the font called "Over the Rainbow" but when I switch from HTML to compose in the editor the text shows in Comic Sans. What could be wrong?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.