Webフォント Noto Sans JPをHTTPS可したブログで使ったら警告が出てしまう時の解決法

Webフォント Noto Sans JPをHTTPS可したブログで使ったら警告が出てしまう時の解決法

Simplicity2を見やすくカスタマイズする際に、本文のフォントを変更しました。その際、セキュリティ警告が出るようになってしまったのでその時の解決法をメモしておきます。

Webフォントで見た目をきれいに!

フォントを変更する際に参考にしたのはこちらのサイト。おかげさまでキレイな見た目になりました。ありがとう!

【2017年版】これで間違いなし!font-familyのおすすめ設定
http://hikineet.com/font-family/

こちらのCSSをそっくりそのままコピペすれば、画面がスッキリ見やすくなる!……のですが、「このサイトは保護されていません」と出るようになってしまいました。

 

フォント読み込みのURLを修正

せっかく苦労してSSLに対応したのにこれじゃ困る!でもきれいな見た目も手に入れたい!ってことで、いろいろ調べてみると

フォントを読み込む時の
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css

の「http」が原因ぽい。ダメ元でhttps://fonts.googleapis.com/earlyaccess/notosansjp.cssにアクセスしたら無事ファイルが開けたので、CSSのファイルも修正することに。

CSSファイルを開いて、httpからhttpsに修正したトコロ、フォントも問題なく表示され、「保護された通信」の鍵マークも表示。これで安全も美しい見た目も両方手に入れることができました。やったね!