Introduction
If you are having issues with web fonts not loading or displaying (particularly on Firefox and newer versions of Internet Explorer) then it is likely that you are experiencing a cross domain loading restriction enforced by the browser. These browsers (among others) enforce the Cross-Origin Resource Sharing standard, and will only render web fonts served with the appropriate “Access-Control-Allow-Origin” response header. This is particularly common when your web pages are loaded from your origin server (e.g. http://www.mysite.com) and your assets such as images, css and web fonts are served from your accelerated domain (e.g. http://mysite.sa.metacdn.com)
The solution
This can be easily rectified by configuring your origin web server to add the appropriate headers, applying them to all responses when common web font formats are requested. The below .htaccess example applies to the Apache web server. In this example we set the Access-Control-Allow-Origin to "*" to allow the hosted fonts to be viewed on any domain. We also need ensure that the fonts have the correct Content-Type header (as browsers are very particular about it), and set a Cache-Control header of 1 hour so that they will be stored at edge nodes for rapid global delivery.
Configuring the Apache web server
<Location /webfont>
Header set Access-Control-Allow-Origin "*"
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
</Location><FilesMatch "\.(eot|ttf|woff)$">
Header set Cache-Control "max-age=3600, public"
</FilesMatch>
Configuring the nginx web server
First, let's make sure nginx has the correct mime types (i.e. the Content-type header) set for the different Webfont file types. On our Ubuntu based Linux systems, the nginx mime types are stored in /etc/nginx/mime.types. We will comment out the existing definition for the eot file extensions, and add new definitions.
# application/octet-stream eot;
application/x-font-ttf ttf;
application/x-font-woff woff;
application/vnd.ms-fontobject eot;
Next, let's edit our default nginx web server configuration. On our system, it is located at /etc/nginx/conf.d/default.conf - on your system it may be in a different location, or you may have a site specific configuration file for each of your domains. In our 'server' directive we have the following snippet:
# Media: Web fonts
location ~* \.(?:eot|ttf|woff)$ {
access_log off;
add_header Access-Control-Allow-Origin "*";
add_header Cache-Control "max-age=3600, public";
}
A working example
Below is an example of what a browser would see when retrieving a webfont from MetaCDN, when the above headers have been successfully set:
$ curl -v -i http://webfont.metacdn.com/webfont/myfont.woff > /dev/null
* About to connect() to webfont.metacdn.com port 80 (#0)
* Trying 68.232.45.253...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0* connected
* Connected to webfont.metacdn.com (68.232.45.253) port 80 (#0)
> GET /webfont/myfont.woff HTTP/1.1
> User-Agent: curl/7.24.0 (x86_64-apple-darwin12.0) libcurl/7.24.0 OpenSSL/0.9.8y zlib/1.2.5
> Host: webfont.metacdn.com
> Accept: */*
>
< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Access-Control-Allow-Origin: *
< Cache-Control: max-age=3600, public
< Content-Type: application/font-woff
< Date: Wed, 09 Oct 2013 04:51:40 GMT
< Etag: "2c0644-11ba5-4cb9511182a01"
< Last-Modified: Tue, 09 Oct 2012 00:03:24 GMT
< Server: ECAcc (syd/B34D)
< X-Cache: HIT
< Content-Length: 72613
<
{ [data not shown]
100 72613 100 72613 0 0 139k 0 --:--:-- --:--:-- --:--:-- 633k
* Connection #0 to host webfont.metacdn.com left intact
* Closing connection #0