Need to use non standard fonts in your web site?
This is now a lot more efficient and robust.

The really old way would be do it as a picture and upload it to your site, this has severe SEO problems of Search engines being unable to parse it and crawl the text, this is not good, so if you want interesting and attractive non standard fonts what do you do?
The other method would be to add the code below to your stylesheet.

@font-face {
font-family: ‘your_font’;
font-style: normal;
font-weight: bold;
src: local(’Your_font Bold’), local(’Your_font-Bold’), url(’font/Your_font.ttf’) format(’truetype’);
}

and then upload the font to a location on your web server, there are also other Javascript methods, some work others dont, but they are all a bit fiddly to add, plus it introduces extra unknown code to your site.

Now good old Google have given an easy to use solution enabling you to add non standard fonts very quickly...

The URL to get your font is here http://www.google.com/webfonts you do have to choose from the selection on offer however this is fairly large and covers a lot of styles that are easy on the eye.

Once you have selected your font you will be delivered to a page where you have some choices to make relating to the method of adding the font call to your files.

Personally i use the @import method which is easy and holistic as it goes in your stylesheets.css add it to the top of your stylesheet and you are done with the importing!
 

So say i want to use the ACME font...

I click the on the small arrow to go to the next screen
**TIP** if you want to view the font click the double box with the arrow
On some fonts you have more choices to make here, if unsure leave as it is, in this example there are no other real choices to make, scroll down the page to the tabbed blue box, and select the @import tab copy the code within the box

@import url(http://fonts.googleapis.com/css?family=Acme);

this code you place into you stylesheet.css,  below the @import you will find the css define you use to add the font to your text, depending on where you want it to show,

font-family: 'Acme', sans-serif;

So if i wanted the style main to have this attribute i would change the following...

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

to

TD.main, P.main {
 font-family: 'Acme', sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

and that is it!
Attractive fonts the easy way