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

便利ツール

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

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

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

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

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

【必見】常時SSL化したはずなのに下層ページがうまくできてない対処法
常時SSL化が必須となった昨今、SSL化はSEO的にも重要なものとなってしまいました。 こちらの記事を書いた時点では常時SSL化しておくと、多少SEO的にメリットあるよくらいでしたが、時代は変わりましたね~ 今回はこの常...
【WordPress】Google Fonts導入方法や簡単な使い方【Webフォント】
非常に便利なGoogle Fontsですが、 使うためには、色々と手順が必要です。 今回はその使い方をご紹介します。 Google Fontsは以下の記事でも紹介しています。 【Webフォント】Noto Sans Japan...
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する!【使い方】
Androidのデフォルトフォントとしても知られる 「Roboto」というフォントですが、 こちらもオープンソースとなっているため、 無料でかつWebフォントとして使用することができます。 くせのない字体であるため、 使いやす...
【Webフォント】Noto Sans Japaneseの導入する!【使い方】
こちらの記事でfont-familyとしてご紹介したNoto Sans Japaneseですが、こちらのフォントは、あのGoogleとAdobeが共同で開発したフォントということで、世界中のあらゆる言語に対応することを目標に開発されているも...
スポンサーリンク

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

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

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

【必見】常時SSL化したはずなのに下層ページがうまくできてない対処法
常時SSL化が必須となった昨今、SSL化はSEO的にも重要なものとなってしまいました。 こちらの記事を書いた時点では常時SSL化しておくと、多少SEO的にメリットあるよくらいでしたが、時代は変わりましたね~ 今回はこの常...
【WordPress】Google Fonts導入方法や簡単な使い方【Webフォント】
非常に便利なGoogle Fontsですが、 使うためには、色々と手順が必要です。 今回はその使い方をご紹介します。 Google Fontsは以下の記事でも紹介しています。 【Webフォント】Noto Sans Japan...
【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する!【使い方】
Androidのデフォルトフォントとしても知られる 「Roboto」というフォントですが、 こちらもオープンソースとなっているため、 無料でかつWebフォントとして使用することができます。 くせのない字体であるため、 使いやす...
【Webフォント】Noto Sans Japaneseの導入する!【使い方】
こちらの記事でfont-familyとしてご紹介したNoto Sans Japaneseですが、こちらのフォントは、あのGoogleとAdobeが共同で開発したフォントということで、世界中のあらゆる言語に対応することを目標に開発されているも...

コメント