We experienced an interesting issue for one of our customers today. The fonts they had specified using the @font-face technique, would not render in Firefox. The fonts would show up fine in Chrome, Safari, and IE, but in Firefox 3.5 the fonts would not render.

After doing some research, and talking to Jake Smith and Roberto Villarreal we realized that we had an issue with the Access Control header.

First, I forced the stylesheet to not be loaded from the CDN, this proved our hypothesis, if the call to the stylesheet was from the same domain, Firefox would render the font fine.

That was nice and all, but I didn’t really like that, it just seemed silly to tell a plugin to send files to the CDN, except one.. all because only one item from the CSS was not working properly. So, I added the following condition inside the Apache configuration..

	Header set Access-Control-Allow-Origin *

This sets the header on the Apache side. We use MaxCDN which honors the headers sent by the origin, so the header is passed through and everything works.

3 thoughts on “Using font-face with a CDN and Firefox

  1. Myrddin

    Your article brought me on the right way. I had to edit the apache configuration file and added

    Header set Access-Control-Allow-Origin "*.myrddin.de"

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

    Then it worked

Leave a Reply