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 に

Header set Access-Control-Allow-Origin “systemserver.com”

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

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

Header set Access-Control-Allow-Origin *

めでたく解決しました。

広告

About: dacelo


4 thoughts on “Font AwesomeやWebフォントが別サーバで表示されない問題の解決(クロスドメイン問題)”

  1. Wonderful beat ! I would like to apprentice at the same time as you amend your web site, how could i
    subscribe for a blog website? The account aided
    me a acceptable deal. I were a little bit familiar of this your broadcast provided brilliant clear idea

  2. Hey there great blog! Does running a blog similar to
    this require a great deal of work? I have very little expertise in computer
    programming however I was hoping to start my own blog soon.
    Anyways, should you have any ideas or tips for new blog owners please share.
    I know this is off subject but I simply wanted to ask. Thanks!

  3. Your style is really unique compared to other people I have read stuff from.
    I appreciate you for posting when you’ve got the opportunity,
    Guess I’ll just bookmark this site.

Leave a Reply

Your email address will not be published. Required fields are marked *