@font-face, Access-Control-Allow-Origin and Cross-Origin Resource Sharing in Web Typography

Suppose you have a site, and you want to use a beautiful and awesomely shiny font that you have purchased on the site, but you also want to put that font on a separate domain or  server instead of in a sub-folder on the same domain, and you would like it to work on multiple browsers and browser versions and maybe even use the font on several sites, but restrict access to it to only those sites (ambitious, I know).  At this point, you will need to use additional code besides @font-face.

Note: You can view my demonstration page for this at http://coyotecreation.com/code/cross-domain-typography.php

To accomplish this, you will use the  Cross-Origin Resource Sharing standard (CORS) for HTTP requests (which is supported by FireFox, and also enables you to accomplish the aforementioned goal). CORS allows a remote host to provide access to some types of resource, so that media resources such as javascript, CSS stylesheets, and images can be stored on a separate domain from the main site domain used for page access.

This now includes web fonts (and likely video in the future).

With web fonts being supported for CORS, Access Control headers need to be sent to the browser to allow access for the site domain requests to use the resource fonts. (You don’t have to do this if the font is located on the same domain).

The  header used for this is Access-Control-Allow-Origin. (ACAO) This specifies the domain that is allowed to access the font or other resource. The values can be either the URI of a specific  domain or domains, or the wildcard character  *, if you are okay with everyone linking to your font.

Example:

Access-Control-Allow-Origin: http://YOURDOMAINNAME.COM

Unfortunately, with ACAO, browser support for a comma separated list of multiple permitted domains is not supported in all versions of FireFox.
The workaround for this on Apache web servers is to add an .htaccess file containing  the following code snippet to  the fonts directory containing your shiny font.

<FilesMatch “.(eot|otf|woff|ttf)$”>
SetEnvIf Origin »
“^http(s)?://(.+.)?(domain1.org|domain.com)$” origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Here is an code sample with domains substituted:

<FilesMatch “.(eot|otf|woff|ttf)$”>
SetEnvIf Origin »
“^http(s)?://(.+.)?(coyotecreation.com|thewitcherworld.com|urbanzamboni.com)$” origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Next, on your CSS file on the domain using the font, you add the @font-face code, including the full url of the font. For my demonstration page here on coyotecreation.com, and with the font being stored on www.thewitcherworld.com, this is what I used. You would change this to use your own domain URL.  I used Arial as the alternate “it’s not working” font because FertigoPro is a serif-rich font, and it made it easy to see at a glance whether or not I had the code set up correctly.

Note: I’ve posted here the relevant excerpts from the css file.

/*****************************
Cross Domain Font Demo Typography in CSS3
****************************/

@font-face {
font-family: ‘FertigoProRegular’;
src: url(‘http://www.thewitcherworld.com/fonts/fertigo_pro-webfont.eot’);
src: local(‘FertigoProRegular’), url(‘http://www.thewitcherworld.com/fonts/fertigo_pro-webfont.woff’) format(‘woff’),
url(‘http://www.thewitcherworld.com/fonts/fertigo_pro-webfont.ttf’) format(‘truetype’),
url(‘http://www.thewitcherworld.com/fonts/fertigo_pro-webfont.svg#webfonteAEVFKTs’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

body#cross-domain-typography .demo{
font-family:”FertigoProRegular”, Arial, Helvetica, sans-serif;
}

That’s it!

Resources:

http://openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing

https://developer.mozilla.org/en/XMLHttpRequest

http://arunranga.com/examples/access-control/

http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox

http://www.peej.co.uk/articles/rich-user-experience.html

http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

One thought on “@font-face, Access-Control-Allow-Origin and Cross-Origin Resource Sharing in Web Typography

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>