Firefox @Font-Face with Local File - Downloadable Font: Download Failed

Firefox @font-face with local file - downloadable font: download failed

A hat tip to Jonathan Kew's response on a relevant mozilla bugzilla entry:

I believe this is working as designed. AIUI, the issue here is that
for a page loaded from a file:// URI, only files in (or below) the
same directory of the filesystem are considered to be "same origin",
and so putting the font in a different subtree (../font/) means it
will be blocked by security policy restrictions.

You can relax this by setting security.fileuri.strict_origin_policy to
false in about:config, but as this gives the page access to your
entire local filesystem, it's something to be used with caution.

To summarise, the "fix" without re-arranging your files:

• Open about:config
• Set security.fileuri.strict_origin_policy to false
• Beware of the security implications

The best way is, however, to make sure any resources are accessible without going back up the file system first.

Note: the origin policy is calculated based on the html, NOT the css file! So a font file right besides an css file might not work, which is very confusing. (At least this is what I thought was the case with Firefox!)

Follow ups:

eradman comments:

It's the other way around: relative paths are relative to the CSS file.

chrylis responds:

You'd think that, but the actual code in Firefox doesn't seem to agree.

Downloadable font on firefox: bad URI or cross-site access not allowed

On your server you will need to add:

Access-Control-Allow-Origin

To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:

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

firefox wont load fonts to localhost using font-face property

The Firefox error console says:

downloadable font: download failed (font-family: "BMitra" style:normal 
weight:normal stretch:normal src index:1): bad URI or cross-site access
not allowed
source: http://fonts.gexek.com/repo/BMitra/BMitra.woff

To use a downloadable font from a different domain, the server hosting the font should have cross-site access settings allowing that, see HTTP access control (CORS).

CSS @font-face not working with Firefox, but working with Chrome and IE

LOCALLY RUNNING THE SITE (file:///)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

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

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

Font-awesome not properly displaying on Firefox / how to vend via CDN?

This solved the Firefox cross domain font issue for me (which causes the font to not load in Firefox). Just add the following to .htaccess or directly to apache config:

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

There is a webpage with instructions on how to set up CORS with different servers:
https://enable-cors.org/server.html

---

Related Topics