Multiple font files for the same font


I’ve only really been playing with font embedding kind of recently, because certain people have always been against them for performance issues and security or other such things. But I digress, for those times you need to add a different variant/alternate typeface for a font (for example, italics, bold, condensed, and so on) because the browser’s rendering just isn’t cutting it, simply do the following:

    @font-face {
        font-family:'fontfacealpha';
        src:url('https://secure.fonthostingsite.com/fonts/fontfacealpha-normal.eot');
        src:url('https://secure.fonthostingsite.com/fonts/fontfacealpha-normal.eot?#iefix') format('embedded-opentype'),        
             url('https://secure.fonthostingsite.com/fonts/fontfacealpha-normal.woff') format('woff'),
             url('https://secure.fonthostingsite.com/fonts/fontfacealpha-normal.ttf') format('truetype');
        font-weight:normal;
        font-style:normal;
    }

    @font-face {
        font-family:'fontfacealpha';
        src:url('https://secure.fonthostingsite.com/fonts/fontfacealpha-bold.eot');
        src:url('https://secure.fonthostingsite.com/fonts/fontfacealpha-bold.eot?#iefix') format('embedded-opentype'),        
             url('https://secure.fonthostingsite.com/fonts/fontfacealpha-bold.woff') format('woff'),
             url('https://secure.fonthostingsite.com/fonts/fontfacealpha-bold.ttf') format('truetype');
        font-weight:bold;
        font-style:normal;
    }
    
    @font-face {
        font-family:'fontfacealpha';
        src:url('https://secure.fonthostingsite.com/fonts/fontfacealpha-italics.eot');
        src:url('https://secure.fonthostingsite.com/fonts/fontfacealpha-italics.eot?#iefix') format('embedded-opentype'),        
             url('https://secure.fonthostingsite.com/fonts/fontfacealpha-italics.woff') format('woff'),
             url('https://secure.fonthostingsite.com/fonts/fontfacealpha-italics.ttf') format('truetype');
        font-weight:normal;
        font-style:italics;
    }
    

Apparently order is important, and the bold/italic style must come last. This also doesn’t work in IE8. The browser may have issues if two styles are specified at the same time, but it’s not certain to me how the browser would then mix them if that ever becomes necessary.

Reference: StackOverflow