クロスドメイン制約でwebfontが表示できない場合

html関連
2016年11月11日

同一ドメイン内で利用する分には多分問題無しだが、例えばkureai.infoに置いたオリジナルフォントを他のドメイン、new-jazz.tokyoなどでは表示できない。当然ローカルでも表示できないので困った。
で検索すると以下のサイトがヒット。
htaccessに以下を追加で解決。

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

ここで
Header set Access-Control-Allow-Origin “http://web.kureai.info”
とするとhttp://web.kurea.infoからのみフォントのダウンロードが可能になる。
また、ここを”*”にすることで全てのドメインからのダウンロードが可能になるのでローカルでのテスト環境でも表示が可能だ。
社名ロゴのような場合はこのままでも良いかも。しかし文字を独自開発したようなオリジナルのフォントを利用する場合は他のサイトで勝手に使われる可能性があるので注意が必要。

参考にさせてもらったサイト
http://blog.lowaivill.com/development/cross-domain/

PAGE TOP