サーバーにwebフォントを置いて使う場合にIEやsafariでは表示されているのにfirefoxやgoogle chromeだったり一部のブラウザで表示されなかった経験はありますでしょうか？時にfirefoxなどのブラウザでうまく表示できない時があります。その場合の対処法を記録したいと思います。

CONTENTS

• 1.Webフォントをサーバーに置く
• 2.webフォントが表示されない原因「クロスドメイン制約」
• 3.「クロスドメイン制約」解決方法
• 4. .htaccessの設置方法

1.Webフォントをサーバーに置く

今回私が経験したのはレンタルサーバーにfontのフォルダを作り、その中にwebフォントを入れていました。念のためにcssでwebフォントの指定方法も記述しておきます。@font-faceを使います。

このような感じでフォントを指定していました。そして、普段使っているfirefoxとchromeで確認したところ、フォントが表示されていませんでした。ローカル環境では表示されていたので、記述がまちがっている訳でもなさそうで、safariで開いて見ると正常に確認できたので、原因はブラウザにあるとわかりました。

2.webフォントが表示されない原因「クロスドメイン制約」

原因を調べたところ、webフォントが表示されない原因はクロスドメインの制約でアクセスが許可されていないことにあるみたいです。

3.「クロスドメイン制約」解決方法

そこでようやく解決方法です。.htaccessをfontを入れているフォルダに置き、以下の内容を記述します。

クロスドメインについては「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典さんの記事がわかりやすかったです。AjaxやJacascriptで使われるそうですが、プログラム関係は詳しくわからないので割愛させていただきます。

4. .htaccessの設置方法

.htaccessを設置したことのない方のために設置方法を記します。まず、適当に名前をつけて（htaccess.txtなど）テキストツールでファイルを作成します。.（ドット）から始まる特殊なフィアルなのでPCでは表示されないかったり、名前をつけれないので最初は違う名前をつけます。そして、さきほどの解決方法で記述したコードをペーストしたら、fontのフォルダを置いているサーバーにアップロードします。サーバーにアップした段階で名前を.htaccessに変更してください。これで完了です。.htaccessはApacheというソフトウェアが使用できる環境でのみ動作するようですので、レンタルサーバーによっては使えない場合もあります。そこは各自確認しておきましょう。
.htaccessについてはSEO HACKSさんの記事を参考にさせていただきました。