Apply Google Web Fonts in Blogger's Dynamic view

The default template designer of blogger contains about 84 Google Web Fonts already which you can use ,but what about others ? There are still about 600+ font available in Google Web Font's directory and that can be used just with some edits in your template !
Today here I will be telling you how you can use all these fonts in blogger's dynamic view.So lets see what we have to do :-


Step 1

Go to Google Web Fonts and just check out the fonts and click 'Add to Collection' in font you wish to use for your blog.And in the lowest right side of your browser's windows you will see a 'Use' button,click out that.Note that you can also use 'Quick Use' button beside one button after big blue button 'Add to Collection'.See the image below I have used 'Milonga" font here.

Like us on Facebook: fb.com/techstap

Step 2

Now after doing the above job,you will be taken to a new window.In it just scroll down to the point '3.Add this code to your website:' and copy the whole code encoded in the box.

Follow us on Twitter: @tech_stap

Now log in into your blogger account and go to blogger's dashboard.Then click 'Template' > 'Edit HTML'.Here find <head> and paste the code you have copied in Google Web Fonts directory directly below the <head> tag.

Step 3

Now at end of code you have just pasted,add '</link>' (without quotes),So your whole code look like the below given code.


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


After it click 'Save template' button.

Step 4

Now go back to your font's page,the font you've selected to use.And just note down or copy anywhere the font's name,like I have been using 'Milonga' font in this tutorial.You can also find font name in the code we have copied just before,see below font name is colourised which I have copied the code from '3.Add this code to your website:' section in Web Fonts directory.

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

Step 5

Now its up to you what you wish to change and depending on that copy any code from below.And don't forget to replace FontName with the name of your font you wish to use,like for Milonga replace FontName with Milonga and for Denk One replace FontName with Denk One in each of the codes given below.

1) To change the body text,copy the following code.


body{font-family: 'FontName', sans-serif !important;font-size: default !important;
}



2) To change post title font,copy the following code.


.article-header h1.title a{font-family: 'FontName', sans-serif !important;font-size: default !important;
}



3) To change blog title font,copy this code.


#header.header .header-bar span.title a h1{font-family: 'FontName', sans-serif !important;font-size: default !important;
}



4) To change link font,copy this code.


a, a:visited, a:hover{font-family: 'FontName', sans-serif !important;font-size: default !important;
}




Now copy the code depending on what you want to change and go to Blogger's Dashboard > Template > Customize > Advance > Add CSS,and paste the code here and just hit enter.Then click 'Apply to Blog' .And hurraay !! now you are all done,just refresh your blog to see it new.
Don't forget to leave comments if you've any problem or query.Please be connected,like us on Facebook and follow us on Twitter.

2 comments:

  1. Huge resemblance with the one here:
    http://www.southernspeakers.net/2013/05/google-web-font-in-blogger-dynamic-view.html

    ReplyDelete
    Replies
    1. Ya bro !
      Your post and mine upto 75% same,hows possible dis ??

      Delete