Webfonts are not loading in Firefox

Make sure you are using the correct version

Firefox began supporting @font-face in version 3.5. Make sure you are using the latest version for testing.

Same Origin Restriction

Firefox also has strict requirements for where the font resides in relation to the website. It requires that all font assets be served from the exact same domain as the calling website.

If you are serving from Apache, you can add this to you .htaccess file to allow your site access to the fonts:

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

Or even better, since the above code will allow anyone to leach:

<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

Just swap out your calling domains for the placeholder ones above.

MIME Types

Finally, if you are serving fonts from Microsoft IIS, you will need to add WOFF to your list of MIME types. There is no defined MIME type yet for WOFF, but "font/x-woff" is confirmed to work.


Interested in a deal too good to refuse?

Perron No1 mini

Perron No1

Perron No3 Light mini

Perron No3 Light

Perron No1 Shade mini

Perron No1 Shade

Perron No3 mini

Perron No3

Perron No2 mini

Perron No2

Perron No3 Bold mini

Perron No3 Bold

Perron No2 Italic mini

Perron No2 Italic

Z Y M m  Perron Fontforecast 7 Fonts for only $69.00 $6.90 Ends Oct 31st


See all the deals on Fontspring!