How can I use one font face for normal weight and another for bold on the body?

Question

I am trying to apply the font 'open sans' to my website. I would like to use the 'open sans regular' for text that isn't bold and the 'open sans bold' font for text that is bold, 'open sans italic' for italic text, and finally 'open sans bold italic' for text that is bold and italic. I don't want to set a class but rather just have them apply to the entire website.

Here is the code that I have tried, but it is just applying 'open sans italic' and i think 'open sans bold italic' to everything even when it shouldn't be italic..

@font-face {
    font-family: 'opensans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibold-webfont.eot');
    src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibold-webfont.woff') format('woff'),
         url('opensans-semibold-webfont.ttf') format('truetype'),
         url('opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: bold;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-italic-webfont.eot');
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-italic-webfont.woff') format('woff'),
         url('opensans-italic-webfont.ttf') format('truetype'),
         url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
    font-style: italic, oblique;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibolditalic-webfont.eot');
    src: url('opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibolditalic-webfont.woff') format('woff'),
         url('opensans-semibolditalic-webfont.ttf') format('truetype'),
         url('opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: bold;
    font-style: italic, oblique;
}
body {
font-family:'opensans';
font-size:78%;
}

Here is an example of the issue, notice all font is italic when it shouldn't be: http://www.bbmthemes.com/themes/modular/

Answer 1

Ok, I figured out my own question. There has to be a very specific order for it to work correctly. You need to define them in this order:

normal italic bold bold italic

So the css would look like this:

@font-face {
    font-family: 'opensans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-italic-webfont.eot');
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-italic-webfont.woff') format('woff'),
         url('opensans-italic-webfont.ttf') format('truetype'),
         url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibold-webfont.eot');
    src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibold-webfont.woff') format('woff'),
         url('opensans-semibold-webfont.ttf') format('truetype'),
         url('opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibolditalic-webfont.eot');
    src: url('opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibolditalic-webfont.woff') format('woff'),
         url('opensans-semibolditalic-webfont.ttf') format('truetype'),
         url('opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}
body {
font-family:'opensans';
font-size:78%;
}

This article helped me to figure it out http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/