Define one font face for several font files with different weight - css

Question

I came across this issue using custom fonts. Many offer several files to support different font weights and italics, so you will define a font face like:
#font-face {
font-family: 'WebFont Bold';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
Where Bold will be replaced with different font specific words like italic or light. I was wondering is it possible to define one font face that will use specific font, say bold if somewhere in css font-weight: bold; is set?

Answer 1

The correct way to do it is like this:
#font-face {
font-family: 'WebFont';
src: url('myfont_regular.woff')....
}
#font-face {
font-family: 'WebFont';
font-weight: bold;
src: url('myfont_bold.woff')....
}

Answer 2

You can set the same name for different font like:
#font-face {
font-family: 'MyFont';
src: url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
font-weight: normal;
}
#font-face {
font-family: 'MyFont';
src: url('myfont-bold.woff') format('woff'),
url('myfont-bold.ttf') format('truetype');
font-weight: bold;
}
And using like:
p {
font-family: 'MyFont';
}
strong {
font-family: 'MyFont';
font-weight: bold;
}