Webfonts are not loading in Firefox

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.

Updated on October 4, 2017