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.

33 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. I have spent most of my life in Kenya,tory burch East Africa I was intrigued to hear MBT shoes,tory burch shoes otherwise known as Masai Barefoot Technology.MBT shoes are most definitely not a fashion statement and can look a bit odd. tory burch outlet Invented in 1997 by Swiss Engineer Karl Mueller, Mbt's are seen as a highly performing aid to fitness. cheap tory burch MBT's are designed to be breathable, flexible and comfortable. tory burch boots The MBT shoes uniquely mbt designed sole, very similar to the 'tyre shoes' often worn by East African Tribal people, are said to mimic walking around barefoot in the sand.tory burch flip flops MBT shoes are slightly weighted and distribute weight evenly across the entire foot and as your body reacts to the weight and instability of the mbt shoe's sole design, muscles,tory burch handbag often those neglected, are made to work to correct this instability.tory burch handbags outlet Could there then be a better way to tone up when the only fitness aid you need is a pair of MBT shoes? tory burch heels MBT shoes can have a beneficial effect on the entire body and MBT shoes are said to enhance both training and massage effects on the body.tory burch flats Here are a few reasons why: All you need to do is start walking. Walking is probably one of the , most popular, tory burch flats cheap simplest, cheapest and enjoyable recreational activities one can find. Walking alone improves circulation, boosts your immunity, strengthens the performance of the lungs and heart, betters your mood, improves muscle tone and gets you out of the house.tory burch wallet Add a pair of Mbt shoes to the equation and many of the benefits are magnified and mbt schuhe muscles, not often used, start to be trained.

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


    milwaukee web design

    ReplyDelete
  16. 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
  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. 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
  19. I found your blog on google while looking for furniture and your post looks very interesting to me.

    ReplyDelete
  20. 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
  21. Wow, Great post,Nice work, I would like to read your blog every day Thanks.

    ReplyDelete
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. “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
  28. 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