Contact
Site: US UK AU |
Nexcess Blog

Firefox and Web Fonts on a CDN

November 27, 2013 5 Comments RSS Feed

Broken Web Fonts on a CDN in Firefox

If you’ve tried loading CDN-based Web fonts while browsing with Firefox, you may have noticed they don’t always load. This is because Firefox implemented the W3C Access Control specification and it causes Firefox to reject requests to cross-domain resources. To correct this issue, we need to tell the machine serving those requests to specifically allow cross-domain usage of the resource. To do that, we need to use the Access-Control-Allow-Origin header, I’ll show you how to do this in the last step.

Here are a few other things you should do as well to make sure things will load correctly.

1) The CSS

When adding the font-face links to the font files in your CSS, make sure you set the absolute path to the font files using the full URL to the CDN:

@font-face {
	font-family:'WebFont';
	src:url('http://your.cdn.net/12345/font/WebFont.eot?v=3.2.1');
	src:url('http://your.cdn.net/12345/font/WebFont.eot?#iefix&v=3.2.1')
	format('embedded-opentype'),url('http://your.cdn.net/12345/font/WebFont.woff?v=3.2.1')
	format('woff'),url('http://your.cdn.net/12345/font/WebFont.ttf?v=3.2.1')
	format('truetype'),url('http://your.cdn.net/12345/font/WebFont.svg#fontawesomeregular?v=3.2.1')
	format('svg');font-weight:normal;font-style:normal;
	}

2) MIME types

In the origin servers, add the MIME types for the font files inside .htaccess:

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff

3) Access-Control

Then set up the Access-Control so Firefox behaves and loads your fonts:

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

A wildcard (*) is used in my example, other options are – use your full domain:

Header set Access-Control-Allow-Origin "www.domain.com"

or a sub domain wildcard:

Header set Access-Control-Allow-Origin "*.domain.com"

This worked for me and I hope it works for you. Please feel free to add your comments, suggestions or questions below.

Posted in: General
  • for nginx use:

    if ($filename ~* ^.*?.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
    }

  • will_hough

    Thank you Sergei, I appreciate the additional info.

  • how can we apply these lines to htaccess. I’ll recieve a 500 internal server error.

  • askwhyweb

    For some reasons Nexcess seems had disabled the cross origion support completely.

  • For IIS use:

    <add name=”access-control-allow-origin” value=”*” />

    Full example on: http://zinoui.com/blog/cross-domain-fonts