Defining CSS @Font-Face bold italic

Question

I am working on a project where I six weights/styles of the font I am working with. These include: regular, italic, semibold, semibold italic, bold and bold italic. I have the @font-face tags setup (in theory) the way they should show. What happens in reality however is that the bold is always italic. Is there anyway to declare these bold + italic weights so that they will work properly? I don't want to call different font-family names all over the place. Ideally I should just be able to declare the right weight and style and get the right version of the font.

@font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-bold-webfont.eot');
    src: url('agaramondpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-bold-webfont.woff') format('woff'),
         url('agaramondpro-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-bolditalic-webfont.eot');
    src: url('agaramondpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-bolditalic-webfont.woff') format('woff'),
         url('agaramondpro-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic, oblique;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-italic-webfont.eot');
    src: url('agaramondpro-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-italic-webfont.woff') format('woff'),
         url('agaramondpro-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic, oblique;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-regular-webfont.eot');
    src: url('agaramondpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-regular-webfont.woff') format('woff'),
         url('agaramondpro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-semibold-webfont.eot');
    src: url('agaramondpro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-semibold-webfont.woff') format('woff'),
         url('agaramondpro-semibold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-semibolditalic-webfont.eot');
    src: url('agaramondpro-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-semibolditalic-webfont.woff') format('woff'),
         url('agaramondpro-semibolditalic-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: italic, oblique;
    }

Any ideas to make that work?

Answer 1

You can use something like thisp.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} for declaring font with paragraf class. Or something like h1, h2, h3, h4, h5, #headline a { color:#FF9900; }

Answer 2

This probably isn't technical answer you're looking for exactly, but why do you need to use three weights (reg, semi and bold, leave aside the italics for now)?

You might find that the contrast between those weights isn't great enough to warrant using all three within one page. You want to use different weights of a font to create distinct levels of hierarchy in your layout; two weights, in combination with changes in size, capitalisation and maybe colour should be enough.

A typeface with a wide range of weights might include these fonts: Hairline; Thin; Light; Regular; Medium; Semibold; Bold; Black; Heavy (with italic versions of each). The extreme ends of that spectrum should never be used for setting long blocks of text, but only in large display sizes or top level headlines. You would then pick two weights between, say, the Light and Bold positions for your main body text, in most cases choosing weights at least two positions apart – Light and Medium, or Regular and Bold – to get enough contrast. Too much contrast would be disruptive to immersive reading; don't pair Light with Bold for example.

If you need the extra in-between weight for a special purpose (for example, you might have white text set against a dark background, so a semi bold would be good) then you could create a separate class for that occasional use, while style-linking the four conventional weights and italics in the font-family declaration as normal.

Answer 3

I may be wrong but I seem to remember reading that for this to work with IE8 you have to call the font names everywhere (which is what you didn't want to do). So in each font-face declaration you have to state "font-style:normal" and also for . This is super annoying as if the font doesn't work for whatever reason you get the "normal" style system font even for bold and italic. Sorry that I can't remember where I'd read that!