久しぶりにWebフォントを導入しようとして設定をしました。
導入したWebフォントはこれです!
【Webフォント】Noto Sans Japaneseの導入する!
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する!
しかし
なぜか全然読み込まない!!
なにをやっても全然読み込まなかったので、
一瞬あきらめたのですが、
ふとしたことで気が付き、
解決することができました。
ちなみにうまく表示されなかったのは、
サーバーが対応していないとか、
難しい技術的な原因ではありません。
どちらかというと、
初心者が陥りそうな理由でした。
![](https://plu-plu.net/wp-content/uploads/2017/06/PPW_kiiroikabetonankinjyou_TP_V-160x90.jpg)
![](https://plu-plu.net/wp-content/uploads/2017/09/26NJ_eigonobisuketto_TP_V-160x90.jpg)
![](https://plu-plu.net/wp-content/uploads/2017/09/004AMEMAN17517_TP_V-160x90.jpg)
![](https://plu-plu.net/wp-content/uploads/2017/09/YAMA_DSC2380_TP_V-160x90.jpg)
常時SSL化していませんか?
Webフォントが適用されない!
Webフォントがうまく表示されない!
Webフォントが読み込まれない!
こんな感じで困っている方、
ブログを常時SSL化していませんか。
常時SSL化とは、URLの「http」を「https」にすることです。
常時SSL化することで、通信が暗号化され、
セキュリティー的に安全性が増します。
おそらく普通のブログの場合は、常時SSL化する必要はないと思うのですが、
SSL化することで、SEO的に多少利点があったりするので、
当ブログでも常時SSL化をしています。
(徹底的にやっていないので、不完全ですが…)
この常時SSL化が問題でした。
読み込む先も「https」にしなければなりません!
Webフォントを読み込む場合は、
Webフォントが格納されているリンクを、
スタイルシートやヘッダーにコードを記述します。
この時に記述するurlの「http」を「https」にしなければなりません。
Noto Sans Japaneseを例に説明します。
Noto Sans Japaneseを読み込む場合、
スタイルシートから読み込む場合は、以下のコードを
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
ヘッダーから読み込む場合は、以下のコードを記述します。
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
これらのコードはどちらもURLが「http」となっています。
しかし常時SSL化しているサイトの場合は、これを「https」に書き換えなければなりません。
これだけで私の場合は、解決することができました。
常時SSL化している場合、
通信の安全が確保できてないとこは、読み込ませねえぞ!!
という強い意志を感じました。
初歩的なミスだとは思いますが、
あまり仕組みをわかっていない私にとっては勉強になったので、
良い経験だったと思います。
ひとつ言いたいのは、
あんなに悩んだ時間を返してっ(笑)
![](https://plu-plu.net/wp-content/uploads/2017/06/PPW_kiiroikabetonankinjyou_TP_V-160x90.jpg)
![](https://plu-plu.net/wp-content/uploads/2017/09/26NJ_eigonobisuketto_TP_V-160x90.jpg)
![](https://plu-plu.net/wp-content/uploads/2017/09/004AMEMAN17517_TP_V-160x90.jpg)
![](https://plu-plu.net/wp-content/uploads/2017/09/YAMA_DSC2380_TP_V-160x90.jpg)
コメント