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:
|
1 |
Access-Control-Allow-Origin: * |
or more specifically:
|
1 |
Access-Control-Allow-Origin: www.acme.com |
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:
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!