skip

Web Font linking and Cross-Origin Resource Sharing

From OFLB

Jump to: navigation, search

You may be quite comfortable to allow everyone to link to fonts on your server. But probably you’d prefer that they do not borrow your bandwidth without asking or benefiting you.

Firefox 3.5 has set a precedent: it only fetches your web fonts, when linked from other sites, if you have expressly set your server to allow it. You can allow third-party sites individually (‘per-site’), or on a blanket ‘all sites’ basis like the Open Font Library does. This is called Cross-Origin Resource Sharing.

However, other browsers that support web fonts do not yet do this. So, to prevent other sites from tying up your bandwidth serving fonts, particularly if they haven’t sent you a polite request before they do so, you can set up your server to do referer checking.

Obviously, to do either of these things, you will need some control over your web server. If you do not have this control, and want to prevent other sites from using your bandwidth, you are better off using the Open Font Library’s server – that’s one of the reasons we exist, after all.


Allowing other sites using Cross-Origin Resource Sharing

To allow all other websites to link to your fonts, add the following to a file named ".htaccess" in the directory where the fonts are contained:

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

If you want to only allow only a certain site, replace the * with its domain name, like this:

   Header set Access-Control-Allow-Origin "http://openfontlibrary.org"

(Thanks to John Daggett from Mozilla for explaining this :-)

Blocking requests from other sites by referer checking

Each request for an item that a browser wants to display in a page is accompanied by a ‘referer’ header – information about the server from which the browser loaded the page. So by checking that this referer header matches your site you can filter the requests for linked fonts and accept only those that are associated with pages that you serve.

This is currently the way to avoid serving ‘third-party’ requests that do not come from Firefox 3.5 browsers.

How can I prevent people from "stealing" the images from my web site? is an Apache FAQ article that gives the details on how to set this up.

The font linking page has more details about web fonts.