Font AwesomeやWebフォントが別サーバで表示されない問題の解決（クロスドメイン問題）

font awesomeって便利ですよね。ちょっとしたアイコンが手軽に使えて。でも、システム屋から見るとときに鬱陶しいことも。

とある、フロントのWebサーバと、システム遷移後のシステムサーバが別になっているシステムにて。
「フロントでは表示されているFont awesomeのアイコンが、システムページでは壊れている」

他のCSSはちゃんと参照できているのに、Font AwesomeやWeb fontが軒並み読み込まれていない。

Googleで「Font awesome 表示されない」などで検索すると、判で押したように以下のような対策が提示される。

• CSSがheaderに読み込まれていない
• Free版ではなくPro版を指定してしまっている
• font-familyに「Font Awesome 5 free」と設定していない
• font-weightを指定していない
• contentのユニコードにバックスラッシュをつけていない

多分、一般的なFont awesomeを使いたいシーンとしては上記であっているんでしょうけど、どれもフロントサーバでは実現されているので…。

あ、サーバが別だからだめなのか？と気づいて色々試した結果、次のことがわかった。

「最近のブラウザでは、ドメインが違うところからWeb Fontを読み込めないようになっている」

これを、Webフォントのクロスドメイン問題という。

解決するには、読み込まれる側のWebサーバに許可設定を仕込めばOK。

例として、webserver.com　に配置したWebフォントを、systemserver.comから読み出すとして。

webserver.comのサーバの /etc/httpd/conf.d/ssl.conf に

と記載してhttp reload。.htaccessでも大丈夫。

もし、どっからでも許可するぜウェルカム！って場合は、ドメイン部分をアスタリスクにすれば良い。

めでたく解決しました。