Cacher is the code snippet organizer for pro developers

 There are two kinds of web fonts. Fonts you put in a folder on your server and reference with the @font-face syntax, and fonts you access from someone else's server.
 
 
 you can get nice free fonts from fontsquirrel.com, font must specifically mention that it allows web linking to use it legally.
 
Steps 
1. Go to https://www.fontsquirrel.com/ website
2. Search for the font you want
3. Under Webfont kit, Click Download @Font-Face Kit 

font kit contains four types of files
1. eot - used by IE
2. ttf - used by most other browsers
3. woff - emerging standard
4. svg - used by iPhones and iPads

Syntax for using the downloaded web font

@font-face {
    font-family: 'gessoregular';
    src: url('GESSO___-webfont.eot');
    src: url('GESSO___-webfont.eot?#iefix') format('embedded-opentype'),
         url('GESSO___-webfont.woff') format('woff'),
         url('GESSO___-webfont.ttf') format('truetype'),
         url('GESSO___-webfont.svg#gessoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face is a selector, font-family is a property we are defining for this selector