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.

@CharlesGoodwin @eradman Actually, both statements about the origin seem true except that they probably talk about two different things: same-origin check is based on the originating HTML file, while relative URLs for font faces are resolved relative to the CSS file containing the @font-face rule.

Moreover, originating HTML file is not the file that uses the font. I have the following local file structure.

<base-directory>/index.htm
<base-directory>/ARPLS/toc.htm
<base-directory>/dcommon/css/fonts.css
<base-directory>/dcommon/fonts/myfont.woff

fonts.css references myfont.css via url(../fonts/myfont.woff) and toc.htm reference fonts.css via <link ... href="../dcommon/css/fonts.css">. index.htm has a hyperlink to toc.htm. Now, I have bookmarked both index.htm and toc.htm. If I use the index.htm bookmark, the font is rendered correctly. If I use the toc.htm bookmark, the font fails to load. I guess this is because myfont.woff is in a sub-directory of the directory containing index.htm but not of the directory containing toc.htm.

Observed in Firefox 38.6.

For local file we have to use local()

For external we have to use url()

According to the document https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

For example

src:local('../src_main/fonts/ElegantIcons.eot');