Unable to load font Awesome from subdirectory

I have the following layout file:



The page /website/index.html

does not use font Awesome at all; the files in /website/Subdirectory/

really use it.

If I access directly /website/Subdirectory/page1.html

, the Font Awesome icons appear as a box with a UniCode number inside. If I am at first /website/index.html

, then visiting any page in the subdirectory will show the icons as expected.

As page1.html

I have <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">


It is locally hosted; that is throughfile://


downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2): status=2147500037
source: file:///correct/path/to/website/font-awesome/fonts/fontawesome-webfont.ttf?v=4.2.0


I am using Firefox on Mac. According to Finder, the version of the font is 4.2.0.

This issue does not exist in Chrome. It looks like some kind of problem with the browser implementation. Work around is appreciated.


source to share

3 answers

It looks like this is a known issue due to security policy of the same origin, see https://bugzilla.mozilla.org/show_bug.cgi?id=760436

The reason the site works after the higher level page has loaded is because the font has already been cached.



Either make sure the font file is in the same directory as the page that loads it, or a subdirectory of that (not the cathedral or ancestor directory); or relax the security check by setting security.fileuri.strict_origin_policy

in false

something like: config.



the problem for me was to set the environment variable as specified in my rails app.

config.action_controller.relative_url_root = "/ myrailsapp"

see https://github.com/bokmann/font-awesome-rails



All Articles