➤
+61 2 8999 8862 info@webski.com.au

Create nice-looking heading via Google Font API

October 26 2010

create nice looking heading via google font api

 

Create nice-looking heading via

Google Font API

 

When I wrote the last blog post I thought that was the last connected with typography, but I think that this is the ultimate solution for web designers who want to use different fonts instead the standard without using any techniques mentioned in the previous posts. I think that typography is very important part of the web design, so this will be dedicated to it too.

First we include the style-sheet file direct from the Google API site with the specifying the font family that we want to use. This project is in beta version and there are 25 fonts so far.

 

 <head>
   <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>
 </head>

 

This example is created and applied to span element but you can do it on every element that can contain text and this is the style for it.

 

<style>
 span { 
        font-family: 'Tangerine', serif;
        font-size: 45px;
       }
 </style>
Next pece of html as we can see the span somtains pure text, no images, no flash.
 <span>
  The New Era of Web Design
 </span>

This is the result:

 

The New Era of Web Design!

 

If we add this code text-shadow: 2px 3px 2px #888888; to the syle for the span element we will get nice shadow and this is the final product.

 

The New Era of Web Design!

 

Search for: