Cross domain font woes in Firefox

March 21, 2012 § 4 Comments

We love using custom fonts with CSS @font-face declarations and have done so on a number of our recent projects. One thing has caught us out on a couple of occasions though. Here’s the scenario:

You’re building a site, everything is going well with the styling. Your custom font is looking good on your local version of the site, it’s been checked in staging and looks good there. You launch the site, it looks good everywhere… except Firefox. Your favourite development browser (well, mine at least, apparently some people like Chrome a lot these days) is no longer showing that lovely font. You can’t reproduce this on your own machine, everything seems lost.

CDNs and subdomains

When this has happened to us, it has always come down to one thing: for highly trafficked sites we use a CDN to serve static assets like CSS, JavaScript and fonts. These files not only come from a different server, they get served from different subdomains (normally “media#{n}.awesomenewsite.com” where n is between 0 and 3). The problem: Firefox allows you to request fonts from the same domain but requires access control headers to be set when requesting them across different domains.

Access Control

So, how do you set these headers? We use nginx as a web server so we use a block a bit like the following:

location ~* ^/assets/fonts/ {
  gzip_static on;
  expires max;
  add_header Cache-Control public;
  add_header Access-Control-Allow-Origin http://awesomenewsite.com;
}

If you use Apache, you could add an htaccess file in the folder where the font files live with the following in:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModulegt;
</FilesMatch>

(That snippet thanks to this StackOverflow answer.)

Rather than setting the requesting domain, you can also set the origin to * to allow any domain to request the resource. It is probably best practice to define the URLs yourself, but as it is only Firefox that respects this header in reality it doesn’t matter too much.

Fonts for everyone

It’s easy to add the access control headers for these fonts, but also very easy to forget! I hope this can serve as a reminder to all of us, so we can all get fonts right on the web.

§ 4 Responses to Cross domain font woes in Firefox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Cross domain font woes in Firefox at Logical Friday.

meta

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: