How To used Custom Font/ Non-standard font, web font in website

1)  To Support All Browser / devices you need to convert your font to following format

1. " .oet"   for-IE
2.  " .ttf"  or ".otf" for webkit-browser
3. ".woff" and ".svg" for other browser and devices 

2) Many online file converters are available To convert  your font. find some of file converters links below 

1. http://www.kirsle.net/wizards/ttf2eot.cgi
2. http://onlinefontconverter.com/myfonts.php
3. http://www.fontsquirrel.com/fontface/generator
4. http://www.freefontconverter.com/
5. http://ttf2eot.sebastiankippe.com/
6. http://code.google.com/p/ttf2eot/  ---- Command Line 

Note: Some times "ttf to eot " file conversion wont work properly, you will need to do some trial-and-error to find proper font converter

3) Add converted font files to your website and Add following CSS.  

Here I am using "interstate-boldcondensed.eot" font inside fonts folder

@font-face { 

font-family: 'interstate-bc';

src: url('fonts/interstate-boldcondensed.eot');

src: url('fonts/interstate-boldcondensed.eot?#iefix') format('embedded-opentype'),

      url('fonts/interstate-boldcondensed.woff') format('woff'),

      url('fonts/interstate-boldcondensed.ttf') format('truetype'),

      url('fonts/interstate-boldcondensed.svg#interstate-boldcondensed') format('svg');

}

how to use in CSS ?
- use @faont-face font-family name as follow.

h1 {font-family: 'interstate-bc';}

--- Cheers :)

Tested on : IE 8, Firebox 3.6 and above, Chrome and Safari