ウェブログ

特定の環境でFont-Awesomeが表示されない時の対処法


Font Awesome the iconic font and CSS toolkit
アイコン表示において、便利なFont-Awesome。
使い方はいろんなブログが解説しているので省きますが、WordPressテーマ「PlaneWhite」において、特定の環境でFont-Awesomeが表示されないというご報告をいただきました。

PlaneWhiteにおいてFont-Awesomeを使用している箇所はヘッダーのFacebook, メール, 電話といったアイコンです。

Sns icon success

これは「画像ではなくてフォントファイルとして読み込んでいる」箇所となります。
画像ではないので大きさも色も自由、スマホの高解像度にも対応、と便利なんですね。

しかし、特定の環境下で表示できないとのご連絡をいただきました。

特定のサーバーとブラウザで不具合

・Windows
・Hetemlサーバー
・chrome / Firefox / IE

確認した限りですが、上記の組み合わせでfont-awesomeが非表示、もしくは文字化け?として正常に確認できませんでした。

Sns icon error

このようになってしまいます。

これでは困るので、原因を調べてみたところ「CORS(Cross-Origin Resource Sharing)」というのが問題でした。
簡単に言うとCORSとは「異なるサーバ間でデータをやりとりする仕組み」です。詳しい解説はこちらをどうぞ。

このサーバーはさくらサーバーを使用しておりテストサイト構築の際はエラーは起きていませんでしたが、Hetemlサーバーを確認したらばっちり拒否されていました。

CDNを参照して解決

サーバーにダウンロードしたfont-awesomeのcssファイルを参照する際に、CDNを参照すれば解決できました。
以前は以下のようにダウンロードしたCSSを参照していましたが

これを、Bootstrapが提供している指定の参照ファイルへ直接参照します。

FontAwesomeのサイトに方法が書いています。使い勝手を考えてダウンロード方式にしましたが、CORSの問題があるのでこれからは参照方式にすることにします。
Get Started with Font Awesome

新しいバージョンだとCDNのサーバーが別のようですが、どちらでも大丈夫でしょう

しかし不思議なのはMacで確認したところ問題が起きなかったという点。。。
ちょっと疑問に残るところです。

この記事を書いた人

池田祐太郎

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。


CONTACTお問い合わせ / お見積もり