Search code examples
webhttprequestpage-load-timewoff

Combine multiple .woff files into one

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?

Solution

  • 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.