CODEWITHSUNDEEP
cssfont-face
Robert Zelník
Robert Zelník

Reputation: 850

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

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?

Upvotes: 2

Views: 3477

Answers (2)

jessedvrs
jessedvrs

Reputation: 424

With this simple tool, you can split up a single font file into multiple files. Works on both Mac and Windows.

http://peter.upfold.org.uk/projects/dfontsplitter

Hope that helps

Upvotes: 0

ScottS
ScottS

Reputation: 72261

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;
}

Upvotes: 3

Related Questions