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>

try to use implemented base64-encoded fonts like:

@font-face {
 font-family:"font-name";
 src:url(data:font/opentype;base64,[paste-64-code-here]);
 font-style:normal;
 font-weight:400;
}

see: http://sosweetcreative.com/2613/font-face-and-base64-data-uri

it worked perfectly.


If anyone are using local resource and facing this problem in firefox. You can go to about:config and change the security.fileuri.strict_origin_policy preference to false.

see : https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs