Configure font with variants - css

Question

Is it possible to configure a donwloadable TTF font to behave the same way than a system font, i.e.:
Font family is stored in several files:
foo.ttf
foob.ttf
fooi.ttf
Font is assigned with the generic family name:
p{
font-family: Foo, serif;
}
Browser picks the appropriate variant automatically:
p.warning{
font-weight: bold;
}
p.note{
font-style: italic;
}
The documentation I've browsed suggests that you need to configure each variant as an entirely different font:
#font-face{
font-family: FooRegular;
src: url(foo.ttf);
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: FooBold;
src: url(foob.ttf);
font-weight: bold;
font-style: normal;
}
#font-face{
font-family: FooItalic;
src: url(fooi.ttf);
font-weight: normal;
font-style: italic;
}
p{
font-family: FooRegular, serif;
}
p.warning{
font-family: FooBold, serif;
font-weight: bold;
}
p.note{
font-family: FooItalic, serif;
font-style: italic;
}
Is it the way it is, or I'm just browsing deprecated/incomplete docs?

Answer 1

It should be something like this:
#font-face{
font-family: Foo;
src: url(foo.ttf);
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: Foo;
src: url(foob.ttf);
font-weight: bold;
font-style: normal;
}
#font-face{
font-family: Foo;
src: url('fooi.ttf');
font-weight: normal;
font-style: italic;
}
p{
font-family: Foo;
}
p.warning{
font-family: FooBold, serif;
font-weight: bold;
}
p.note{
font-family: FooBold, serif;
font-style: italic;
}
That way you add the styles to the same font family.

Answer 2

The fact many tutorials ignore is that you can simply use a single family name and assign it to all rules:
#font-face{
font-family: Foo; /* Just one name */
src: url(foo.ttf);
font-weight: normal;
font-style: normal;
}
#font-face{
font-family: Foo; /* Just one name */
src: url(foob.ttf);
font-weight: bold;
font-style: normal;
}
#font-face{
font-family: Foo; /* Just one name */
src: url(fooi.ttf);
font-weight: normal;
font-style: italic;
}
... thus all the CSS you need is:
p{
font-family: Foo, serif;
/* ^^^ */
}
p.warning{
font-weight: bold;
}
p.note{
font-style: italic;
}
Credit for the info goes to #duvigneau