CSS Fonts: Howto convert multiple TTF files into one file?

Question

I received multiple TTF font files. Need to convert into 1 file which I can use in CSS.

How can I do this?

Thanks

Answer 1

You can't do it, each font needs it's own separate file. You can use a service to convert a ttf to eot, and svg files and then use some code like this in your style.css (assuming that's the name of your stylesheet) file:

@font-face {
    font-family: 'FuturaM';
    src: url('fonts/FuturaMedium.eot');
    src: url('fonts/FuturaMedium.eot?#iefix') format('embedded-opentype'),
         url('fonts/FuturaMedium.ttf') format('truetype'),
         url('fonts/FuturaMedium.svg#FuturaMedium') format('svg');
}

Hope this helps!

Answer 2

Each TTF file is composed of different font-styles, which are normally regular, bold and italic. Each TTF file is linked with a unique font style.
So, it's impossible to combine different TTF files even if it's from the same font. You can't combine an apple, an orange and a mango just because they're all fruits right? (lame example, sorry)

Answer 3

This can be done with base64 encoding using a standard @font-face declaration. When using a preprocessor allows you to disable specific fonts simply by commenting them out (using sass/less comments).

Here is an article explaining more about this method. http://sosweetcreative.com/2613/font-face-and-base64-data-uri

A major advantage is getting all of your font assets into a single request, you can even add them to your main stylesheet (before other styles).

Personally I have a main stylesheet with 'required fonts' and an 'extended' stylesheet with additional fonts making sure the transfer size won’t get out of control when many fonts are in use. My threshold is about 250Kb gzipped including all styles which is about 2-3 font files. Everything beyond that point goes into 'extended.css'.

Cheers

Answer 4

I don't know if CSS has support for it, but there exist True Type Collection file format: https://en.wikipedia.org/wiki/TrueType#TrueType_Collection