2

How do I serve multiple fonts, in different font files, to the client in one request/response? I'm using .woff files.

Is it possible to combine font files into one file?

1

1 Answer 1

4

In your css, each font-face should have it's own URL, so basically the answer would be no you can't.

But what you could do is to embed each of your font in a base64 url. Meaning the data of the fonts will be integrated inside the css file. All of them keeping their own local url, with no need to do extra http requests.

see http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/

5
  • base64 encoding is a great idea! Jul 20, 2013 at 13:40
  • 1
    One important thing is that the browser will cache the CSS, not the resulting Base64. This means that, on low-end devices such as mobile devices, there may be a few extra milliseconds spent parsing/decoding the megabyte-long Base64 strings into binary fonts and then parsing that, on each page load. This may blow the 100ms budget of user-percieved snappiness. Should browsers be smarter? They should. Some may already be, but make sure to test if this matters to you because of speed. Sep 2, 2014 at 0:30
  • 1
    Also be aware that this method can cause problems for bandwidth limited clients who might not otherwise download the font files.
    – miken32
    Apr 23, 2016 at 2:04
  • @CamiloMartin I would say that if the CSS has been cached, so is the base64 font encoded inside it. Though parsing/decoding might be costly indeeed. As you said, it depends on the smartness of the browsers and where their cache layer(s) is/are taking action.
    – challet
    May 30, 2016 at 16:29
  • @miken32 true that, if the browser doesn't need or require the fonts but the css, the first ones would be uselessly downloaded.
    – challet
    May 30, 2016 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.