クロスドメイン制約によりFirefoxでFont AwesomeなどのWEBフォントを表示できない場合の設定

Tweet

Pocket

【この記事を読むのに必要な時間は約 4 分です】

Font Awesome などのWEBフォントを利用する際に、フォントを利用するサイトのドメインとWEBフォントを配置したサーバのドメインが異なる場合、使用するブラウザとそのバージョンによってはクロスドメイン制約のためWEBフォントにアクセスできず、フォントが正常に表示されないことがあります。

この場合、WEB フォントを配置したサーバ側に他のドメインからのアクセスを許可するよう設定を追加することで、WEB フォントを表示できるようになります。

Firefoxなどの最新ブラウザではクロスブラウザを許可しない

以下では、リストのマーカーとして <i class=”fa-li fa fa-star-o” > を指定することで星マークを表示させています。
Google Chrome 31.0、IE 8/9 では問題なく表示することが出来ました。

しかし、現時点の最新である  Firefox 25 を使用した場合に星マークは表示されません。

ログにはクロスドメインのアクセスは許可されていないため、フォントのダウンロードに失敗したことを示すメッセージが出力されています。

downloadable font: download failed (font-family: “FontAwesome” style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed

クロスドメイン制約が発生する原因

domain02.jp から domain01.jp上に配置されている Font Awesome を利用するとき、以下のリンク要素により CSS を参照します。
<link rel=”stylesheet” href=”http://domain01.jp/css/font-awesome.min.css” />

このとき、font-awesome.min.css を参照するまでは問題がないのですが、font-awesome.min.css 内部では以下のようにフォントファイルを参照しています。

url(‘../fonts/fontawesome-webfont.eot?v=4.0.3’);
url(‘../fonts/fontawesome-webfont.ttf?v=4.0.3’);

../fonts/ では domain01.jp 内部のファイルを相対参照していますが、参照先のサーバの設定で外部ドメインからのアクセスを許可していない場合はファイルにアクセスを行わないようにする実装がブラウザによって組み込まれるようになりました。ブラウザ側の機能であるため、ブラウザによってファイルへのアクセス可否が異なる結果となるのです。

クロスドメインの許可

参照先サーバの .htaccess に以下を追記し、外部ドメインからのフォントファイルへのアクセスを許可します。

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|otf|eot|woff)$">
    Header set Access-Control-Allow-Origin "http://domain02.jp"
  </FilesMatch>
</IfModule>

対象ファイルの拡張子を FilesMatch タグで指定し、アクセスを許可するドメインを Header set Access-Control-Allow-Origin にて指定します。すべてのドメインからアクセスを許可する場合は “*” を指定します。

参考：

• Font Awesome Doesn’t Work In Firefox : Fixed
• Font Awesome not working in Firefox & IE – Stack Overflow

Amazon S3 では以下のようにすると良いようです。

• クロスドメインでWEBフォントを使用する場合の設定