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?

Filip Haglund
  • 13,919
  • 13
  • 64
  • 113
  • 1
    Possible duplicate of [Combine multiple .woff files into one](http://stackoverflow.com/questions/13134863/combine-multiple-woff-files-into-one) – miken32 Apr 23 '16 at 02:05

1 Answers1

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/

challet
  • 870
  • 9
  • 21
  • base64 encoding is a great idea! – Filip Haglund Jul 20 '13 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. – Camilo Martin Sep 02 '14 at 00: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 '16 at 02: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 '16 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 '16 at 16:29