Friday 15 April 2011

Google Font Api

   


Following other recent posts about using non-standard fonts, I would like to show how Google Font Api is working.
Following the examples in the related page, we can create text with a custom font. In reality there's a quite wide selection of available fonts, however it is limited. If you think it is too limited, then search the blog for other solutions.


The basic function of Google Web Fonts is linking to the Google Api. Put the following code in the <head> of your document:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
   h1 {
        font-family: 'Tangerine', serif;
        font-size: 48px;
        }
</style>

Now we have all of our <h1> tags in Tangerine font. If you add:
<h1>Hello!</h1>
to your page, you will see the new font applied. Obviously you can style the font using the appropriate styles in the <style> itself (alignement, size, colour, shadow etc).

It is very easy to choose from available fonts. The Google Font Directory shows you all the possible fonts you can use and the appropriate code to insert in your page. They are not unlimited but quite enough for almost any situation.

And that's all for today.

0 thoughts:

Post a Comment

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.