Top Nav

Fonts & RackSpace Cloud Files

If you try to serve fonts from RackSpace Cloud Files or other CDN then you may run into problems with browsers refusing to load the fonts. Here’s an example error:

Font from origin ‘http://xxxxx.xxx.rackcdn.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.acme.com’ is therefore not allowed access.

The problem is your browser doesn’t consider it secure to load the font from a different domain then the web page itself was loaded from.

The solution is CORS or Cross-Origin Resource Sharing as described here:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

When RackSpace Cloud  Files serves the font file, it needs to set a header like:

or more specifically:

This informs your browser that it is save to include this resource in the indicated alternate origin.

RackSpace Cloud Files provide a means to change the headers on individual files. Here’s the technical details:

http://docs.rackspace.com/files/api/v1/cf-devguide/content/Assigning_CORS_Headers_to_Requests-d1e2120.html

You can also set headers from the mycloud.rackspace.com portal. Just login, go to Storage -> Cloud Files and locate your font file. Click the gear icon and choose Edit Headers. A dialog will open where you can set the “Access-Control-Allow-Origin” header.

Note that it takes some time for header changes to propagate through the CDN. I always purge the file after making changes in the hopes that this will accelerate propagation but I can’t confirm that it helps.

With the addition of CORS headers you can reliably service your font files from the CDN!

Email
Print