Are you still use flash and images for the art font in your web? if so you should know the magic of Google Font Directory and Google Font API , you can use all the font in the Google Font Directory , also it’s very easy to install.

What’s google font api

Google Font API helps you add Google Font Directory web fonts to any web page.It provide high quality open source fonts,works in most browsers,also as other gooles services it’s very easy to use.

Add google font api to your site

First,you need add the google font css,for instance:

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

this import the Tangerine font style,but if you want to use multiple fonts,for example you need add 1 more font Inconsolata,the css link should be

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

then you need apply the css style to the element you want

CSS selector {
  font-family: 'Font Name', serif;
}

or use a inline css

<div style="font-family: 'Font Name', serif;">Your text</div>

let’s see a live sample

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/* add this in the header*/
 
 <h1 style="font-family: 'Tangerine', serif;font-size:36px">Making the Web font  looks nice!</h1>
/* add this in the body */

result is:

Making the Web font looks nice!

this sentence is ordinary text, so it will not effect the other style (like color,text-shadow….) you add for this sentence .

Complex sample

I think you may love it now,let’s see what’s more the google font api can do?The google font api provide more options for the font style, like italic or bold,here is the rules
"
To request multiple font families, separate the names with a pipe character (|).
the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,)
"
also for weights, you can alternatively specify a numerical weight; for example

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold|Tangerine:700

this means load Cantarell italic font ,Droid+Serif blod font and Tangerine font with font weight 700.
the live sample

<h3 style=" font-size:30px ">Enjoyed it,Happy reading!</h3>
<h3 style="font-family:'Droid Serif';font-size:30px ">Enjoyed it,Happy reading!</h3>

Enjoyed it,Happy reading!

Enjoyed it,Happy reading!