Tuesday, May 25, 2010

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.

0 comments:

Post a Comment