CSS3 font-face … how to make font-style:italic to use the actual italic version?

Question

I have two embedded fonts - a regular and a "real" italic version …

@font-face {font-family: 'MyFont-Regular';src: url('wf/2061CF_2_0.eot');src: url('wf/2061CF_2_0.eot?#iefix') format('embedded-opentype'),url('wf/2061CF_2_0.woff') format('woff'),url('wf/2061CF_2_0.ttf') format('truetype');}
@font-face {font-family: 'MyFont-RegularItalic';src: url('wf/2061CF_6_0.eot');src: url('wf/2061CF_6_0.eot?#iefix') format('embedded-opentype'),url('wf/2061CF_6_0.woff') format('woff'),url('wf/2061CF_6_0.ttf') format('truetype'); font-style:italic, oblique;}

I'm using the italic version on a few classes … 

.MyFont-RegularItalic, .italic, em { font-family: MyFont-RegularItalic; }

I'm applying MyFont-Regular on my body and I have an element div.example where I want the text to be italic.

In order to achieve this I would have to apply this …

div.example {
    font-family:MyFont-RegularItalic;
}

This works of course fine. However, since I'm already applying the "regular" version of the font to my body I wonder if I can somehow make font-style:italic; work for this as well. So I don't want to apply the entire font-family again but simply declare it as italic.

div.example {
    font-style:italic;
}

This doesn't work and leads to a browser-slanted italic version of the "regular" font - the real "italic" fontface is not used in this case.

Any ideas or tricks if it is possible to make my stylesheet automatically use the "real" italic version of the font when I apply font-style:italc to an element.

Thank you in advance, Matt

update:

Answer 1

Add the style to the font declaration.

@font-face {
  font-family:"MyFont";
  src:url("myfont.ttf");
}

@font-face {
  font-family:"MyFont";
  src:url("myfont-italic.ttf");
  font-style:italic;
}