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.
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.