自サーバーに置いたWebフォントを読み込めない時の対処法

Google Fontsなどのサービスとして公開されているのではなく、独自にサーバーに置いたWebフォントをCSSで指定しても反映されない場合の対処方法です。独自ドメインで使っているサーバーとは別にFC2やSeesaaブログなどをやっていて、そちらで自サーバーのWebフォントが読み込めないという場合、クロスドメイン制約でアクセス制限がかかっている事があります。

スポンサーリンク


Google Fontsなどのサービスとして公開されているのではなく、独自にサーバーに置いたWebフォントをCSSで指定しても反映されない場合の対処方法です。

独自ドメインで使っているサーバーとは別にFC2やSeesaaブログなどをやっていて、そちらで自サーバーのWebフォントが読み込めないという場合、クロスドメイン制約でアクセス制限がかかっている事があります。

ていうか、私自身が今使っているバリューサーバーに置いたフォントを、別のサイトで読み込ませて使っていたんですが、気がついたら使えなくなっていました。以前は使えていたんですけど、どこかの段階でバリューサーバーの設定が変わったようです。

その時にやった事のまとめです。

Webフォントが読み込めないドメインのアクセス制限を解除する

先に公開したページ「Google Feed APIを使わずXMLHttpRequestでクロスドメインのRSSを取得する方法 まとめ」に書いたんですが、.htaccess に Access-Control-Allow-Origin の設定をするとアクセス制限を解除できます。

.htaccess に次のように書くと全てのドメインからのアクセスが許可されます。

Header append Access-Control-Allow-Origin: *

* はワイルドカードで、この場合は全てのドメインを指します。

全てのドメインにではなく、自分の使っているドメインだけ許可したい時は、そのドメインを指定します。許可したいドメインが http://example.com なら下の通りです。

Header append Access-Control-Allow-Origin: http://example.com

ただし、ドメインを複数指定するには工夫が必要なようです。
参考「Access-Control-Allow-Originヘッダで複数のオリジンドメインを許可する方法 – ぷれすとぶろぐ

Internet ExplorerだけWebフォントが反映されない時の対処法

上の設定で、Webフォントは読み込まれるようになったんですが、IEだけ反映されませんでした。

そこで調べたら、次のページを発見。Truetype embedding-enabler

このページにあるembed.exeをダウンロードしてコマンドプロンプトで以下のように実行。そのフォントを再アップロードしただけでIEにも反映させることが出来ました。

embed font_name.ttf

私の場合は上のツールで解決したんですが、下のページで他の使いやすいツールとかを詳しく説明してくれています。

IEにも対応したWebフォントの使い方について | memocarilog

このページによると、IE以外のブラウザでは拡張子が .ttf のTrueTypeフォントや .otf のOpenTypeフォントが使えるんですが、IEだけは拡張子が .eot のEmbedded Open Typeしか使えないというのが原因のようです。


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください