【Webフォント】Webフォントがうまく適用されない場合の対処法【表示されない】

便利ツール

久しぶりにWebフォントを導入しようとして設定をしました。

導入したWebフォントはこれです!
【Webフォント】Noto Sans Japaneseの導入する!
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する!

しかし
なぜか全然読み込まない!!
なにをやっても全然読み込まなかったので、
一瞬あきらめたのですが、
ふとしたことで気が付き、
解決することができました。

ちなみにうまく表示されなかったのは、
サーバーが対応していないとか、
難しい技術的な原因ではありません。

どちらかというと、
初心者が陥りそうな理由でした。

スポンサーリンク

常時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化している場合、
通信の安全が確保できてないとこは、
読み込ませねえぞ!!
という強い意志を感じました。

初歩的なミスだとは思いますが、
あまり仕組みをわかっていない私にとっては勉強になったので、
良い経験だったと思います。

ひとつ言いたいのは、
あんなに悩んだ時間を返してっ(笑)

コメント