カラーミーなどWEBフォントを別サーバーに置く時の注意点

最近ではよく使われているWEBフォント。

ちょっとしたアイコンを表示したい時。
もっと言えば、一般的なPCには設定されていなさそうな、珍しいデザイン的なフォントを使ってテキストを表示したい時は重宝します。

※テキストの場合は、フォントの読み込みが重くなったりするので、使い勝手は難しいところのようですが…。

今回は、そんな便利なWEBフォントに関する備忘録です。

発端は、カラーミーなどのショップサイトを構築する際、WEBフォントを使用したくて、WEBフォントのデータ一式を別サーバーにアップして、そこから読み込もうとしました。
（カラーミーの場合、FTPで画像をアップできるプラン、領域があるのですが、WEBフォントのファイルはうまく機能しないようでした…）

そこで、WEBフォントだけ別のWEBサーバーにアップして、外部ファイルとして読み込む方法を使うのですが…

【こんな感じで、外部のフォントファイルを読み込んでいました】

@font-face {
    src: url('【フォントファイルまでのフルパス】/webhostinghub-glyphs.eot');
}

…ところが、その後何をどうやってもWEBフォントが読み込まれない。

□と出ているので、CSS自体が間違っているわけではなさそうですが、とにかく文字フォントのファイルが読み込まれていない。

色々調べていたのですが、
Firefoxなどの最新ブラウザではクロスブラウザを許可しない！
…という事がわかりました。

詳しい原理は、参照させて頂いたサイトに記載されていますが、
どうやら、他のドメインからファイルにアクセスしようとすると、
サーバー側がそれをはじいてしまうようです。

firefoxの最新版ではこのようになる…との事でしたが、
僕の場合は他のブラウザでも同じように弾かれてしまいました。

万事休す…かと思いましたが、ちゃんとアクセスを許可する方法があるようです！

htaccessを使用して、外部から読み込みたいファイルを置いているサーバーに、以下のように記述してあげる事で、外部ドメインからの読み込みを許可できます。

<IfModule mod_headers.c>

<FilesMatch "\.(ttf|otf|eot|woff)$">

Header set Access-Control-Allow-Origin "【許可したいドメイン】"

</FilesMatch>

</IfModule>

FilesMatchで読み込みたいファイル拡張子を指定して、
Header set Access-Control-Allow-Originで許可するドメインを指定しています。

これで、カラーミーなどの、WEBフォントを同じサーバーに上げれないサイトでも、WEBフォントを使用する事が出来そうです！