Firefox’s file uri origin policy and web fonts

File this one under gotchas. I’m desktop browser testing a series of layout templates for a current project today. Everything was going really well until I encountered some files where my web fonts stubbornly refused to display in Firefox, but rendered perfectly in every other browser. Luckily I found the reason for the problem and a solution to it.

The project’s based on a standard 320 and Up configuration. It has ‘CSS’ and ‘fonts’ folders off the root and uses Font Awesome’s web font-based icons in place of images. So far, nothing unusual.

In all HTML files at the root level, for example ‘/index.html’, web fonts rendered perfectly in every browser including Firefox (Mac.) But when I tested HTML files at a sub-folder level, for example ‘/templates/index.html’, web fonts failed in Firefox despite every other aspect of CSS working perfectly.

An hour’s frustrated trial and error and then searching turned this up. The issue stemmed from me working locally and testing files using file:/// in my browsers instead of running files from a server.

It turns out Firefox has a strict “file uri origin” policy that was preventing it from accessing my web fonts from folders not on the root. This only matters when working locally and not from files on a server.

Gotcha.

To work around the problem I reconfigured Firefox using about:config, changing security.fileuri.strict_origin_policy from ‘true’ to ‘false.’

Now, when I’m testing locally, I can load font files from across different folders in Firefox.

So now I know.