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

An easy way to combine multiple fonts in one file is to encode them in base64 and embed them in CSS. They will still be different fonts though and the total size will increase. There are various online tools that can create the css for font files you upload, like this one.

Answer 2

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