How to Import Google Web Fonts to Blogger

On In
Blogger has few in-built fonts included with it. You can go to your Blogger Dashboard and navigate to Template > Customise > Advanced and choose your favorite fonts from the list. 

If you want to import Google fonts to your blog, it is also very easy. Go Here and select the font you would like to use. For example, here I am selecting the 'Tangerine' font. Now click on the 'Quick use' button.
Google Fonts Screenshot 1
In this page you will see four options: Select the style you want and Choose the character sets you want. Now come to the third step where it says, Add this code to your website. Now copy the code and paste it after <head>. (Go to your Blogger Dashboard and navigate to Template > Edit HTML. Press Ctrl+F and search for <head>) The actual code looks like this:

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

You should add a '/' before the closing bracket like this:

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

Now save the template. And the last step is integrate the new font into your CSS. Go to your Blogger Dashboard and navigate to Template > Edit HTML. Press Ctrl+F and search for the respective part as described below.

Post Titles:

h3.post-title a {  font-family: 'Tangerine', cursive; }

Sidebar Gadget Titles:

.sidebar .widget h2 {font-family: 'Tangerine', cursive;}

Blog Title:

.Header h1 {  font-family: 'Tangerine', cursive;}

Post Body:

Body{ font-family: 'Tangerine', cursive;}

No comments:

Post a Comment