• put your amazing slogan here!

    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 font

    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:
    1. Please to visit http://www.google.com/webfonts
    2. Select whichever fonts you want to use. If you have found the fonts you want, click on the name of those fonts.
      choose font on google web fonts
    3. Click Use This Font tab
      grab googlle web fonts code
    4. Copy the code which on notepad or other text editor googlle web fonts code
    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:
    1. Please login to blogger with your ID
    2. Click Design
      blogger design
    3. Click Edit HTML tab
      blogger edit html
    4. Please backup your template by click on Download Full Template
    5. Finf the <head> code
    6. Paste the Google Web Font code you had under the <head> code
      css font code
    7. 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;
           }
      
    8. 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;
           }
      
    9. Click SAVE TEMPLATE
    10. Finish. And your posts title font should has changed.

    3 komentar:

    1. マットおよび高級片ライカに駆け付けて、长い时间を着て蒸し暑く感じではないよ

      ReplyDelete
    2. use the font,here whether for the body text, blog title, posts title, sidebar title, etc.

      ReplyDelete
    3. Great post! Google web fonts are a wide range of web friendly fonts you can install on your blog.Thanks for sharing your nice info.
      website design

      ReplyDelete

     

    About Me

    My Photo
    Hi, Im joys, Its my dreaming to be a full-time blogger, imagining a master blogger. But until now all still the same, just an ordinary Joys, newbie a blogger who tries to writing and share information about the culture of blogging. begin actively blogging from september 2009... read more about me

    Recent Comments

    Followers