Solution: Firefox Font-Face Cross Domain Problem

Categories:

Firefox Font-Face Cross Domain Problem:

The other day I was working on a website that we were accelerating with a content deliver network (CDN). All the static content was to go through the cdn including the styles (css) file. We ran into a weird bug on Firefox. Font-face styles were not showing. The fonts were loading off the cdn.mysite.com sub domain while the rest of the site was running off mysite.com.

@font-face{
	font-family:'PreloSlab';
	src:url('../fonts/preloslab-medium-webfont.eot');
	src:url('../fonts/preloslab-medium-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/preloslab-medium-webfont.woff') format('woff'),
		url('../fonts/preloslab-medium-webfont.ttf') format('truetype'),
		url('../fonts/preloslab-medium-webfont.svg#PreloSlabMedium') format('svg');
	font-weight:normal;font-style:normal
	}

Reason:

Seems that Firefox supports the Cross-Origin Resource Sharing standard (CORS) for HTTP requests of some types of resource. This is a way for a remote host to control access to some types of resource. As it turns out, web fonts are subject to CORS. So, the appropriate Access Control headers need to be sent to the browser to allow the domain originating the request (the Origin) access to the resource.

Firefox Font-Face Cross Domain Solution:

Seems messy but it really isn’t. The correct header is:

Access-Control-Allow-Origin: http://mysite.com

On an Apache server you can accomplish this with a little edit to the .htaccess file.

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://mysite.com"
  </IfModule>
</FilesMatch>
Note: while you should be able to list several domains separated by a comma. This did not work. I had to use Header set Access-Control-Allow-Origin “*” for multiple domains.

Font-Face Mime Types

While you are at it, you can also add the correct mime types to the files.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff woff

One Response to Solution: Firefox Font-Face Cross Domain Problem

  1. Joe Castro says:
    Thanks – by , Mar 23, 2012
    Rating: 4.7/5stars

    I just started using a CDN as well and it looked like everything was ok till we looked at Firefox, things were just not right. With firebug, it looked like the fonts were being downloaded, but for some reason they were not rendering. This answers a lot of questions.

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>

© 2012 - www.UnseenRevolution.com - Unseen Revolution LLC. 333 NW 4th Ave. Portland, OR 97209
5092f1262e1c9
By
UnseenRevolution.com Portland, OR Category: Webinar
UnseenRevolution.com Portland, OR Category: Webinar
UnseenRevolution.com Portland, OR Category: Webinar