A separate font file is required for every style and weight of a typeface that you want to use. For example, to use four unique styles of a typeface on a site (say Regular, Italic, Bold, and Bold Italic), you would need to import four font files (ClearSans-Regular, ClearSans-Italic, ClearSans-Bold, ClearSans-BoldItalic).

If you give a chunk of type a style or weight that you haven't loaded the appropriate font file for, browsers will add weight to or slant the text themselves. ("faux-bold", "faux-italic"). This gives you ugly, rough, less readable text that counteracts the primary reasons to use a web font in the first place. Default CSS styles (H1 automatically adding font-weight: bold;) can also cause this in some cases. [See link]

There's two main (maybe three) approaches to implementing them correctly, Laura Franz does a good job of describing them here: http://coding.smashingmagazine.com/2013/02/14/setting-weight...

Chris Coyier explains it here:

http://css-tricks.com/watch-your-font-weight/

Edit: Another explanation:

http://alistapart.com/article/say-no-to-faux-bold

the way most people do it is to use

  font-family: blah;

on every class that needs it. this is because @font-face isn't supported completely when using simply

  font-weight: blah;

to differentiate between different @font-face family groups.