Use Google web font to styling header and text in your blog

If you are using default Blogspot templates ,you can use Template Designer to set special fonts for header and text .But this function is not available if you are using a custom template . So how can we embed special fonts to blog ?


As you may know ,Template Designer in Blogspot use Google font for applying special fonts to blog .In this post ,I will show you how to use Google Font for styling text in blog without Template Designer ,just need some lines of code .

You can see demo here ( my template Simplex Newspro )

Here are steps :

1,Go to this site ,and select the font you like .

2,When move your mouse over the font ,you will see the text "Click here to embed...." .Click on this text .A new page appear . Click on Use this font tab



3,You will see two lines :



The first line is something like this  :
<link href='http://fonts.googleapis.com/css?family=xxxxx' rel='stylesheet' type='text/css'>
xxxxx is the font name . Copy this line and paste right before <b:skin><![CDATA[/* in template file . An important thing : you must add an slash ( / ) at the end of this line ,like that
<link href='http://fonts.googleapis.com/css?family=xxxxx' rel='stylesheet' type='text/css'/>
If not ,you will see an error message .

The second line you get in Google web font page is something like this :

h1 { font-family: 'xxxx',xxxxx; }

xxx are font name and style of the font .
 This line illustrate how the font you choose applied to h1 tag .

To applied the font you choose to an element in blog ,find CSS code of this element , and add the attribute  font-family: 'xxxx',xxxxx; into element's CSS attributes

For example ,in my live demo I applied new font to post title in template Simplex Newspro .
Here are steps I did :
First ,I go to this website ,and choose the font Indie Flower
 
Click on "click here to embed Indie Flower"
 
Second ,I go to Dashboard - > Design ->Edit HTML ->Checked on Expand widget templates
Add the first line to embed font Indie Flower



After that ,add the font-family attribute to element I want to apply new font in CSS section


That's all .Save template and new font will be appeared .

In this post ,I just want to show you how to use Google font to embed new fonts to blog . It's very easy if you are familliar with CSS ,work with CSS or customize templates before . If you are a newbie and don't know where to insert font-family attributes to applied new font for an element,you can make a comment . I can help if possible .