IEでWebフォントを読み込めない!@font-face が cross-origin 要求に失敗しました。

IEで当サイトを見たらWebフォントがうまく読み込まれていません。
IETesterで各バージョンのIEで閲覧したところIE9以降で不具合が出ていました。
右クリックから要素の検査で調べてみると

@font-face が cross-origin 要求に失敗しました。リソース アクセスが制限されています。

となっていました。

どうやら、クッキーフリードメイン対応のためにwp-contentをstaticサブドメインにしていることでクロスドメイン扱いされているようです。

//Use cookie-free domains
define('WP_CONTENT_URL', 'http://static.rougebleu.net/wp-content');
define('COOKIE_DOMAIN', 'www.rougebleu.net');

折角クッキーフリーに対応したのに元に戻したくないので対策を調べました。

.htaccess で

Header append Access-Control-Allow-Origin: *

とすることで無事に解決しました。

参考サイト
続 クロスドメインで使う XMLHttpRequest と CORS の話
F12 開発者ツール コンソール エラー メッセージ CSSコード

コメントを残すコメントをキャンセル