Alright so all too often is @font-face used incorrectly. So here is the right way to build out a family of fonts (with bold, italic etc.). It is very simple one just keeps the name of the font-family the same in new @font-face rules and change the desired properties with the desired values and accompanying font file. So if one wants a normal and bold futura one would use the following syntax. WIth the font-family name still defined as Futura and link to a futura_bold.ttf

NOTE: Also this is not the full syntax I would use. I would use the a bulletproof declaration which provides many web font file extensions as there is not a single standard across all browsers. See the Paul Irish Bulletproof @font-face Syntax.

Weights

Values: normal , bold , 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

@font-face{
	font-family: Futura;
	src: url(../fonts/futura/futura.ttf);
} /* Default font-weight: normal  (no declaration needed) */

@font-face{
	font-family: Futura;
	src: url(../fonts/futura/futura_bold.ttf);
	font-weight:bold;
/* so any futura type that has bold applied to it will use this style */
}

The improper way people do this is by defining a new font name. Creating an @font-face tag with font-family: ‘Futura Bold’;. This is the incorrect syntax is and can make things quite confusing especially if the font-weight is not applied. So if a bold font is declared as normal then bold is applied to this with css the browser will bold an already bold font (which is not the bold styling a type foundry may produce).

We can do the same as we have with font-weight with font-style (italics) and font-stretch (expanded and condensed versions)

Styles

Values: normal , italic , oblique

@font-face{
	font-family: Futura;
	src: url(../fonts/futura/futura_italic.ttf);
	font-style:italic;
}

Stretch

Values: normal , ultra-condensed , extra-condensed , condensed , semi-condensed , semi-expanded , expanded , extra-expanded , ultra-expanded

@font-face{
	font-family: Futura;
	src: url(../fonts/futura/futura_condensed.ttf);
	font-stretch:condensed;
}

I won’t dive very far into this but one can also limit which characters are loading from the font file. So if one is working with a multilanguage file it can limit the characters used to those in the language. See Limiting Characters W3 Specification