久しぶりにWebフォントを導入しようとして設定をしました。
導入したWebフォントはこれです！
【Webフォント】Noto Sans Japaneseの導入する！
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する！
しかし
なぜか全然読み込まない！！
なにをやっても全然読み込まなかったので、
一瞬あきらめたのですが、
ふとしたことで気が付き、
解決することができました。
ちなみにうまく表示されなかったのは、
サーバーが対応していないとか、
難しい技術的な原因ではありません。
どちらかというと、
初心者が陥りそうな理由でした。
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
常時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化している場合、
通信の安全が確保できてないとこは、読み込ませねえぞ！！
という強い意志を感じました。
初歩的なミスだとは思いますが、
あまり仕組みをわかっていない私にとっては勉強になったので、
良い経験だったと思います。
ひとつ言いたいのは、
あんなに悩んだ時間を返してっ（笑）
コメント