How to define font-face for multiple typefaces inside a single font file?

Question

I have a font family in a single font file with multipe weights & styles (Regular, Bold, Italic, Bold Italic) and would like to define the font faces using @font-face tag. How can I do that?

If I do this:

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

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

... it shows both Regular and Bold in regular typeface.

If I set font-weight: bold for h1, h2, h3 etc., it shows these elements as electronic bold. How can I extract multiple typefaces from a single font file?

ScottS ScottS · Accepted Answer · 2012-11-06T17:37:23

If you do in fact have all the weights and styles embedded into a single font file, then I believe your only solution is to separate those definitions into multiple files (not sure what all would be involved in that), as to my knowledge @font-face can only deal with them as separate files.

Normally, font families that are open and available to be used on the web have the weights and styles broken into separate files, not included in one single file. You might search to be sure your font is not available already as separate files. All the examples I am aware of always have them as separate files. That way, a different file can be used for the various weights/styles, but the same font-family name used, like so:

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

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

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

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

How to define font-face for multiple typefaces inside a single font file?

2 Answers