How to Add Google Web Fonts To BloggerBlogging, Information, gadget, hardware, software, SEO, and Review Online Products

How to Add Google Web Fonts To Blogger
How to Add Google Web Fonts To Blogger

How to add Google web fonts to Blogger - Was explained earlier on How to change Font on blogger Template, but of course the font used are still standard like Arial, Tahoma, Verdana, etc. If you want more interesting fonts, you can get it by using Google Web Fonts.
Google Web Fonts is web fonts provide by Google which can be use on websites or blog for free. There are many interesting choices fonts, and you can chose whichever fonts you like.

Google Web Fonts

Before using google web font on your blog, please decide where you will put the font, whether for a blog title, posts title, sidebar title, or for the overall blog content? If you have decided, then you can go to google web font.

Google Fonts Code from Google Web Fonts

The first step you do is to take the font code from Google web fonts, here are the steps:

Please to visit http://www.google.com/webfonts
Select whichever fonts you want to use. If you have found the fonts you want, click on the name of those fonts.
Click Use This Font tab
Copy the code which on notepad or other text editor

However, before you insert the font code you’ve got, you should to edit the end code from > into />
For example if the original font code like this

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

The code above should changed into like this:

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

Determine the fonts that will modified

As written earlier that you must to decide where you will use the font, whether for the body text, blog title, posts title, sidebar title, etc.

Font for the body text

Font for the body means for all your templates, the CSS code used could be like this:

body {    background:#8f8e8e;     width:100%;     color:#000000;     font-family:Arial, Tahoma, Verdana;     font-size:12px;     margin:0; padding:0;     }

Focused on body { ………….} code because the value would be different for each template.

Font for Blog Title

Blog tilte generally using heading 1 (h1) in the CSS code. Blog title code generally use code like this:

h1{     color:#666;     font-size:20px;     letter-spacing:1px;     font-weight:normal;     padding:10px 0 5px 0;     line-height:100%;    font-family:"Arial",Georgia,TimesNewRoman,serif;     text-transform:capitalize;     margin-bottom:0px     }

Or maybe like this:

#header h1{     color:#666;     font-size:20px;     letter-spacing:1px;     font-weight:normal;     padding:10px 0 5px 0;     line-height:100%;    font-family:"Arial",Georgia,TimesNewRoman,serif;     text-transform:capitalize;     margin-bottom:0px     }

Focused on h1 code, because each template will be different.

Font for Posts Title

Posts title on blogger template typically use heading 3 (h3), so be focus on that code, posts title code sample:

.post h3{      font-size:16px;      line-height:20px;      padding-bottom:15px;      }

Font for Sidebar Title

Sidebar title on blogger template typically using heading 2 (h2), so be focus on that code, example for sidebar title code:

.sidebar h3{      color: #333333;      text-transform: capitalize;      font-size: 14px;      font-family: Arial, Tahoma, Verdana;      font-weight: bold;      margin: 0px 0px 5px 0px;      padding: 0px 0px 2px 0px;      border-bottom:1px solid #cccccc;      }

How to Add Gogle Web Font To Blogger

How to In Blogger assume that you already have google web fonts code and has determine where the code will be placed. For convenience, How To In Blogger will use Tangerine font and will be used for the posts title.
Here are the steps:

Please login to blogger with your ID
Click Design
Click Edit HTML tab
Please backup your template by click on Download Full Template
Finf the <head> code
Paste the Google Web Font code you had under the <head> code

Look for your posts title code on your template. Generally, the posts title code using h3. Posts title code sample:

.post h3, .post h3 a{      color:#191919;      margin:0;      text-transform:capitalize;      text-align:left;      font-size:26px;      font-family:"Times", Tahoma, Verdana;      }

If there is similar code on posts title code with this code
```
font-family:"Times", Tahoma, Verdana;
```
Then you have to change that code into like this:
```
font-family: "Tangerine", arial, serif;
```
If there is no font code on posts title, just add google web fonts code between the existing value.
And the code will be like this (Remember! This is just a sample using Tangerine font, if you want to use other fonts, just adjust it)
```
.post h3, .post h3 a{      color:#191919;      margin:0;      text-transform:capitalize;      text-align:left;      font-size:26px;      font-family: "Tangerine", arial, serif;      } 
```
Click SAVE TEMPLATE
Finish. And your posts title font shuld has changed.

Because the template codes are different each other, need some adjustment. If you have trouble on it, please leave your comments and your blog address so i can see and try to give you hand. How to Add Google Web Fonts To Blogger

How to Add Google Web Fonts To Blogger