@font-face is a CSS rule which allows you to download a particular font from your server to render a webpage.The @font–face CSS at-rule allows authors to specify online fonts to display text on their web pages.

Create @font–face Kits

Create Your @font–face Kits by uploading the fonts you want to use.

All of the free fonts at FontFace.com are available in both Windows and Mac formats. And, unlike other font sites, you don’t have to waste your time wading through thousands of horrible fonts.

How to Use @font-face

@font-face is without a doubt the best option for web designers to create beautiful web typography. Not only is @font-face flat out amazing, is incredibly simple to use. It only requires a few lines of CSS and then declare the font-family just like you would any other font on the web.

Css:

@font-face {
font-family: ‘web-font-italic’;
src: url(‘web-font-bold.eot?’) format(‘eot’),
url(‘web-font-bold.woff’) format(‘woff’),
url(‘web-font-bold.ttf’) format(‘truetype’),
url(‘web-font-bold.svg’) format(‘svg’);
font-weight: normal;
font-style: italic;
}

For full cross browser compatibility with @font-face, make sure you use each of the web font formats – .eot, .woff, .ttf, and .svg. The file formats required for @font-face can be generated on FontSquirrel.com’s @font-face Generator.