Tuesday, 1 January 2013

Using Google Web Fonts In Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Every blog needs some perfect fonts to match their content. There are lots of websites where you can get some free and paid fonts, but Google Web Fonts are totally free to use and it's hosted in Google's Server. From this tutorial you'll learn how to use these fonts on your blog, website or anywhere.

Here We Go

First go to Google Web Fonts and select your favorite style by clicking 'Quick Use.'


Now scroll down a bit and you will see a link tag code , copy this code and also copy #2 text (Web Font Family Name) as shown in image below:


Now Go To Blogger > Template > Edit HTML and paste Font Style Sheet just below <head>:


Now search and add the CSS to use this font, just before the ]]></b:skin> tag :

h1 {
font-family: WEB-FONT-NAME ;
}

Replace WEB-FONT-NAME with your web font name which we copied earlier. In this font our web font name is 'Freckle Face', cursive. So make this code like:

h1 {
font-family: 'Freckle Face', cursive;
}
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.