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?

Accepted Answer

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.

Combine multiple .woff files into one

Solution

Problem