Just how sick are you of Arial and Times New Roman in websites? Don\’t you wish you could easily use new and interesting typefaces for your headings and even your body text? Now there is an easy way to do that and you don\’t need anything special.

The font you want to use is probably either OpenType Font or a TrueType Font. The problem up to now has been that Internet Explorer will only use Embedded OpenType. And to make it worse, other browsers use Scalable Vector Graphics fonts only. So what is a web designer to do?

The answer is as simple as going to this site: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ It explains the process in great detail.

Here, however, are the basics:
1. Go to the Font Squirrel Page to the @font-face Kit Generator.
2. Click the add a font button and browse to the font you want to use (I just copy a font from my font folder in the Control Panel to the desktop) and make sure you have checked the agreement box below.
3. Once your font has been uploaded, the field will turn green. Download your kit. It is a zipped file in which there is a demo.html file, the css file and the files you will need for the different browsers.
4. You can add the CSS to your present CSS file, you may want to change the src: to reflect the folder where you will actually upload the font.
5. Now all that remains to be done is to create a new class in your CSS. Here is a sample:

.newfont {
font-weight: 700;
font-style: normal;
line-height:normal;
font-size:22px;
color:#003592;
font-family: \’Name-Of-New_Font\’, sans-serif;
}

Or you can put it in your body tag, h1 tag or any tag you like.

Easy Peasy.

Thank you, Johnathan Snook, Ethan Dunham of Font Squirrel and Paul Irish for making this so easy.