How to merge fonts?

Question

I have a number of fonts,

• OpenSans-bold.ttf
• OpenSans-boldItalic.ttf
• OpenSans-extrabold.ttf
• OpenSans-italic.ttf
• OpenSans-light.t

Answer 1

You need the different font files if you wish to use different typefaces (regular, italic, bold, etc.), because each typeface is implemented as a separate font file (actually, you even need it in different font formats, to cover different browsers).

But you can use them as a single font family, much like you use, say, just Arial and apply italics and bolding to it, using CSS directly or indirectly (via HTML, e.g. h2 elements are bold by default). For this, you need to declare a font family.

E.g., FontSquirrel generates CSS code that defines each typeface as a font family. This is possible, but illogical and inconvenient. For example, it generates

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

To make things more logical, change the font-weight value, and change the font-family name to one that you use in different @font-face rules (for the different typefaces of the family). E.g.,

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