There are many ways form website designers and front-end developers to get more fonts on a web page than just the standard fonts that we have been using in HTML. CSS @font-face has been around since CSS2 and IE5, but is becoming much more wide spread with CSS3.

Here’s the skinny on @font-face design and implementation:
Supported browser Versions Include: IE V.5+, Mozilla/Firefox V.3.5+, Safari V.3.1+, Opera V.9+, iPhone V.3.1.
But this is true only if you are including .TTF, .OTF, .EOT and .SVG font formats… so you should also always include common fonts and a default font.
h3 {
font-family: yourNameForTheFont, curlyQ, arial, helvetica, sans-serif;
}

Including all those different font types, making your fonts visible to the widest possibe audience might seem daunting but font squirrel has a fine solution. Font Squirrel will generate the fonts you need to upload so it can work across all browsers and platforms:
http://www.fontsquirrel.com/fontface/generator

Because of font licensing concerns, web designers cannot simply embed any font on your website. Your best bet is to get a free font. There are lots of great free fonts out there, and lots of sites have lists of free fonts that you can use with @font-face. One very good free font site is fontex.org.

Below you will find a link that explains all the steps necessary to make @font-face happen
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

A nice resource for web design is this 30 beautiful and free fonts you can use with @Font
http://designlovr.com/30-beautiful-and-free-fonts-you-can-use-with-font-face/