I'm serving the fonts used in on of my major web applications from a different subdomain that my application itself runs from. The domains are like this:

  • www.example.org for the application
  • static.example.org for all static content (JS, CSS, PNG/JPEG and of course WOFF for the fonts)

When testing this with Firefor 10 (yeah I know, but it's still the version officially supplied by Debian) I noticed that none of the fonts loaded from static.example.org were displayed correctly. The reason for this is that the requests that fetch the fonts from a different domain are considered to be CORS requests. Those types of requests, in such a simple sceanrio as fetching fonts, expect a header to be present in the HTTP response from the foreign domain (e.g. static.example.org).

This header is called Access-Control-Allow-Origin and can have a value of "" to allow all domains to access this resouce (e.g. the fonts). To statically set this header for each response to a requested font on *static.example.org one can use the following configuration snippet for Apache:

AddType font/ttf .ttf
AddType font/otf .otf
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-woff .woff
<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
<IfModule mod_expires.c>
    Header set cache-control: public
    ExpiresActive on
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType font/otf "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"

This excerpt from my configuration sets the header on each response and also assigns the correct MIME type together with a cache control that can be considered sane for something as static as fonts.