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/

Answer 2

You need to change the font family name with different identifiers. I can see you are using the same name for all class. Check below-

Normal

 @font-face {
    font-family: 'opensansNormal';
    // code goes on

Bold

 @font-face {
    font-family: 'opensansBold';
    // code goes on

Answer 3

You have two ways of doing that, by creating various font entries (a little heavier loading and unnecessary) or by applying the font type on the font-weight or font-style.

Various font entries (change the MyFontName value to the name of the new font type you want):

@font-face {
    font-family: 'MyFontName';
    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;
}

Best way (apply the font-style of the font on the CSS you want):

    @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 STYLE ARE HERE */
    }

p{font-family:opensans, sans-serif; font-style:italic;}