Using custom font with CSS

For more explanation : Using Font Face

The code is pretty simple, here is the basic code

@font-face {  
  font-family: "Eurostile";  
  src: url(fonts/EurostileLTStd.eot); /* IE */  
  src: local("Eurostile"), url(fonts/EurostileLTStd.otf) format("opentype"); /* non-IE */  
} 

If you got bold variation for the font, you won’t need to create another font family for it, simply add your font variation style into the css.

For example, bold text, simply add font-weight: bold

@font-face {  
  font-family: "Eurostile";  
  font-weight:bold;
  src: url(fonts/EurostileLTStd-Bold.eot); /* IE */  
  src: local("Eurostile"), url(fonts/EurostileLTStd-Bold.otf) format("opentype"); /* non-IE */  
}

IE can only read EOT file, FontSquirrel got a perfect font-face kit generator for it. The generator will generate not only EOT but also other type of font file.

They also got nice collection of fonts, you should check their website!