A webfont is a specially tuned font for use on websites using the CSS @font-face declaration. A webfont comes in four flavors. A TrueType (TTF) file, a WOFF (Web Open Font Format) file, an EOT (Embedded OpenType) file and an SVG (Scalable Vector Graphics) file. Each one is designed to target different browsers. You will need all four when using webfonts to build a website.
Web designers and programmers use @font-face CSS declaration that web to specify a font. This is well supported across 5 main browsers (IE, Chrome, Firefox, Safari, Opera).
Web fonts are fonts that have been licensed specifically for web-use. Besides Google Webfonts, there are other font sites that offer free (and legal) fonts for use on the web like Font Squirrel (free), and Typekit (mostly a paid service).
For IE 6–8 you can only use TTF fonts wrapped up as EOT or EOT “Lite” (uncompressed). For Firefox, Opera, Chrome, and Safari, you can deliver TTF or OTF files either “raw” or, in some cases, wrapped up as WOFF files or as data URI’s inside a stylesheet. SVG will surely be a major font format going forward but its main virtue today is support in Mobile Safari for the iPhone and iPad.
Check out the details from below links:
http://alistapart.com/article/fonts-at-the-crossing
http://www.fontsquirrel.com/tools/webfont-generator
https://www.google.com/fonts
http://stackoverflow.com/questions/15501319/how-to-transform-google-web-fonts-to-a-combined-css
