Merge multiple .woff files into one

Question

On the website, I manage several .woff files, one for each font. In the interest of saving load time, I want to reduce the number of requests made. Is it possible to combine these woff files into one resource?

Answer 1

You can associate woff assets with your CSS using base64.

Inside your @ font-face ad:

url('data:application/x-font-woff;base64,myVeryLongBase64StringGoesHere...'); 

This can increase the file size of assets. In my experience, this is usually about 20% - about the same size as the equivalent TTF file. Most of this can be restored using a server that supports gzip. A compromise is acceptable to me, but YMMV.

As it is often recommended when embedding blobs in CSS - save them all in a separate stylesheet, quoted after your basic style. Otherwise, the client may wait for the fonts to load before they see your content as they see fit.