さくらのレンタルサーバ上にWebフォントのファイルを置いて、それを外部のブログやサイトから参照できるようにする話。
経緯
今年の8/31をもってGoogle DriveのWebホスティングサービスが終了したので、Google Drive上に上げていたWebフォントが使えなくなった。
という訳でさくらのレンタルサーバ上に移行しようとしたのだが、フォントファイルをサーバ上に移動させたものの、はてなブログ(このブログ)からはフォントファイルが読み込まれなかった。
問題点
どうやらクロスドメインによるアクセスが問題のよう。
具体的にはHTTPレスポンスヘッダに“Access-Control-Allow-Origin”がないといけないらしい。
Access-Control-Allow-Originは、それによって指定されたドメインからのアクセスなら読み込んでいいよってものらしい。"*"を指定するとどんなドメインからのアクセスでも読み込めるようになる。
解決方法
現在のさくらのレンタルサーバでは.htaccessでHeaderが効くらしいので、
.htaccessファイルを作成し、
Header set Access-Control-Allow-Origin: "*"
などと書き込んでフォルダと同じディレクトリにぶち込むととりあえずはてなブログからも読み込めるようになる。
セキュリティを考えるとちゃんとドメインを指定したり、フォントに限定して設定できるよう工夫した方がよさそう。
参考
- IE9以降でwebfontが文字化けする原因と解決策 - Qiita
- 【助けて】さくらのサーバーだとIE9以降でwebfontが文字化けする - Qiita
- 今のさくらのサーバではHeaderは効くようです。
