May 25, 2010

How to Use Google Font API on Blog CSS?

What is Google Font API? The Google Font API helps you add web fonts to any web page. It means you dont need to install font family on your desktop computer to see custom font on any web.
Benefits of the Google Font API include:
  • A choice of high quality open source fonts.
  • Works in most browsers.
  • Extremely easy to use.
For example, the following text uses a web font called Tangerine:


We can apply this font on web without install it on our PC, even our visitor can see it because we use font and script from Google Directory.

Yes, Google have created Google Font Directory. There we can browse this catalog of available fonts, learn about the font designers who created them, and copy the code required to use them on our web page. The fonts in the directory are all released under open source licenses; you can use them on any non-commercial or commercial project.



Now, we can use this unique font on our website or blog. How to use Google Font API ? For reference, you can read this Quick Start example or follow this example.

Step 1
Open Layout>Edit HTML. Add a stylesheet link to request the desired web font(s). Copy these code and paste after <head> code



Note : Change Font name as your desire or you can pick this code from Google Font Directory. For exampale if you want to use Yanone Kaffeesatz font, go to Google font directory, click on font type, then click on Get Code.



Step 2
Insert CSS code
font-family: 'Yanone Kaffeesatz', arial, serif;

You can insert it wherever you want. For example you want use that font for Post title, so insert it after
.post h3 {

or you want to use it as global font so insert it after
body{

etc.

I try to use custom font for my post title as you can see it. I think this is a great idea especially for everyone who concern on blog design and appearance. Thanks Google.

32 comments:

  1. yes it works for me, you can check my blog...

    thank for sharing Cebong...

    ReplyDelete
  2. Hi, please I need buy a template for blogger, please contact me. vicmgm1@gmail.com

    ReplyDelete
  3. This will work in blogger template, correct?

    Peace, Love and Chocolate
    Tiffany

    ReplyDelete
  4. still waiting for your design using this google font api :D

    ReplyDelete
  5. Thanks u r information

    its very useful

    ReplyDelete
  6. Nice fonts. I'm thinking how to do it in Wordpress.

    ReplyDelete
  7. mo nanya dunk, kl google font directory bisa nya d buka pake program apa?
    begitu d klik kan dy ngedonlot sendiri,,,
    emng begitu, ataw saya yg salah yah?

    thanks

    ReplyDelete
  8. @tika: ga perlu di download tik..itu kaya online directory atau harddisk online

    ReplyDelete
  9. hoho, iya ternyata saya salh kmaren,,mkasih yah,,
    mo nanya lg dunk, spesifikasi paste yg step 1 itu d sebelh mana yah? head yg paling ats bgt atau yg tengah2..

    maksih bnyak
    *gagal mulu sayah dr kmaren2

    ReplyDelete
  10. Very nice post. Get Amazing usefull blogger widgets and install easily in your blogspot. http://youtools.blogspot.com

    ReplyDelete
  11. Ty, i will mention that with a link back to your blog. Great post, and congrats for Google!

    ReplyDelete
  12. @tika: yang atas . opean head..yg bawah kan closed nya

    ReplyDelete
  13. Nice tutorial for me!
    Thanks for teach me as a newbie in blogging design!

    ReplyDelete
  14. Very nice post. Get Amazing usefull blogger widgets and install easily in your blogspot.


    milwaukee web design

    ReplyDelete
  15. i dont know how to change the font at my page..
    plz help me...
    even i already add the link to my CSS.. but i doesn't work..
    nothing change...
    sorry.. im new blogger..

    ReplyDelete
  16. Very nice illustrations or photos, I need these kind of people ! I became a number of them liek regarding referring to you ought to look. Hey there to get the best french, I'm certainly spanish.

    ReplyDelete
  17. Very nice illustrations or photos, I need these kind of people ! I became a number of them liek regarding referring to you ought to look. Hey there to get the best french, I'm certainly spanish.

    ReplyDelete
  18. I found your blog on google while looking for furniture and your post looks very interesting to me.

    ReplyDelete
  19. Thanks a lot for saying about useful info. It necessary to understand that mobile apps development could help in your mobile industry by installing customized software apps.

    ReplyDelete
  20. Wow, Great post,Nice work, I would like to read your blog every day Thanks.

    ReplyDelete
  21. I have hunting it for a long time. So happy I got it today. I hope that our owners can share more good things with us.

    ReplyDelete
  22. Thanks for nice info. Let me mention about cheap home insurance that are from homeowners insurance agents. Save on free rates on homeowners insurance.

    ReplyDelete
  23. Thank you for writing this great posts. You have affordable possibility to clarify gaming affiliate. The most common casino programs such as go wild affiliates and great poker rooms such as redbet.

    ReplyDelete
  24. Ils ont plus d'une fois nous a aidé des fossés du désespoir. Parfois, ces fossés ont grandi pour devenir des ravins, mais ils ont juste souri et continué à tirer sur machine a sous en ligne

    ReplyDelete
  25. Coach outlet online Leading American designer and maker of luxury lifestyle handbags and accessories.Large market in Europe and Canada,UK,USA etc.Welcome to Order!2011 New Style arrive,Free Shipping!

    ReplyDelete
  26. “Luxury, fashion and art are both expressions of emotion and passion; they search the

    exceptional and give us an alternative view of the world. Art inspires fashion and luxury,

    as luxury and fashion inspires art, Coach Factory Outlet."

    ReplyDelete
  27. in the Coach Outlet role of impotent bystander,among the 17 countries that use the euro,matter what happens at the European summit meeting on.

    ReplyDelete

Hi, thanks for visiting. You can leave your comment here

 

Ipietoon - Blog Design and Online Business Blogging Since 2008