Combine multiple .woff files into one

Question

On a website I manage we have several .woff files, one for each font. In the interest to save loading 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 bundle the woff assets into your CSS with base64.

Inside your @font-face declaration:

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

This may increase the asset's file size. In my experience this is usually by around 20% - roughly the same size as the equivalent TTF file. Much of this may be recovered with a gzip-capable server. The tradeoff is acceptable for me, but YMMV.

As is often recommended when embedding blobs in CSS - keep them all in a separate stylesheet, cited after your base style. Otherwise, the client may be waiting for the fonts to load before they see your content as intended.

Answer 2

I don't have the reputation to comment, but to update @thumphries answer, you can now use the following for WOFF and WOFF2:

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

url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...');

And for reference, on UNIX, you can use the built-in base64 command to directly generate your base64 string like so:

$ base64 myfont.ttf > fontbase64.txt

I find this preferable, since latency is the biggest issue for mobile users, and I add a url fallback for browsers that don't speak WOFF2 (less than 8% of my users) to avoid increasing total size of the site. Like so:

url('data:font/woff2;base64,myVeryLongBase64StringGoesHere...'),
url('/fonts/myFont.woff') format('woff');