Add Google web font to blogger

Couse the font used in blogger are still standard like Arial, Tahoma, Verdana, etc. If you want Change your fonts, you can get it by using Google Web Fonts. Actually google has tool for do this but the template codes are different each other so need change it manual by your self.

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. You can check here for more about Google Web Fonts

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 Google 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 should has changed.

7 komentar:

ナイキシューズOctober 13, 2012 at 2:28 AM
マットおよび高級片ライカに駆け付けて、长い时间を着て蒸し暑く感じではないよ
coolNovember 24, 2012 at 1:46 AM
use the font,here whether for the body text, blog title, posts title, sidebar title, etc.
Gerard MartinOctober 24, 2020 at 9:03 AM
When you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. roofer sheffield
Gerard MartinOctober 28, 2020 at 9:11 AM
I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here! keep up the good work... roll-off dumpsters Leander tx
usamaApril 27, 2021 at 4:59 AM
This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. brick work company Brooklyn
Nba 2k21May 28, 2021 at 1:27 AM
New home development has various advantages. At the point when you're on the lookout for another home, you need to decide whether you need another home or a used home. This implies you need to consider expenses and highlights to sort out where the best arrangements are. To learn of the multitude of advantages, you need to track down the correct manufacturer. When you find the correct developer, the advantages become increasingly self-evident.

At the point when you're taking a gander at new home development, you need to recall that nobody else has at any point lived in the home. This implies that you're not acquiring another person's issues. Numerous individuals purchase homes however don't genuinely have a clue how to deal with them. This implies that you may discover a wide range of issues with wiring, plumbing and even tidiness as you get arranged into the home. With another home, you don't have those issues.

palissade chantier

Ac JituMay 29, 2021 at 12:26 PM
Thanks for sharing excellent informations. Your web-site is very cool. I'm impressed by the details that you have on this web site. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found simply the information I already searched all over the place and simply couldn't come across. What a perfect web-site. XMX London Ltd

Under construction