Question

We’ve set up a Google Cloud Storage bucket with the intention of serving web fonts. By using the CORS settings we can correctly serve woff fonts to IE 9, webkit, firefox; eot to 7 and 8 etc. Cache-control is set to far future. Behaviour is as expected in webkit / mozilla browsers – the font is requested once and cached on the client computer.

However, the Vary: Origin header (which appears to be unmodifiable) causes Internet Explorer to issue an If-
Modified-Since request on each page request, resulting in a 304. This every-page-revalidation from IE means that there is a flash of unstyled content for every page, so we’ve had to revert to using our own server where we have more control over the headers.

We’ve reproduced this locally. Our testing has show it makes no difference whether the font file is served from the same origin or a cdn, with or without an Access-Control-Allow-Origin directive. The key problem is entirely the Vary header, and Goolge’s servers setting it to Origin.

This behaviour is common to IE7, IE8 and IE9. It can be solved by a) changing the Vary header to Vary: Accept-Encoding or b) removing the Vary header altogether, whereupon everything behaves normally.

With the current configuration then Google Cloud Storage cannot be used as a cdn for font files, which is frustrating.

Is there any way to control the Vary header? Is this something that might be considered? And if not, are there any CDNs support that feature?

Thanks.

Answer 1

There are two things you can do to remove the Vary: Origin header for your responses:

1. Set your CORS config to allow all origins: <Origin>*</Origin>.
2. Put objects in a CORS-disabled bucket (default behavior).

Otherwise the Vary: Origin header is necessary for correct caching behavior as the response varies by origin.