混合コンテンツについて。Webフォントの読み込みを外部ではなく内部からにしたい！

Question

Webフォントを外部から読み込んでいることが原因で、混合コンテンツ問題が起きています。
エラーメッセージは以下の通りです。

######発生している問題・エラーメッセージ

Mixed Content: The page at 'URL' was loaded over HTTPS, but requested an insecure stylesheet 'フォントのURL'. This request has been blocked; the content must be served over HTTPS.

Webフォントを内部からの読み込みにして、エラーを直したいのですが、参考になるサイトや記事が見つかりません。どなたか教えていただきたいです...

Answer 1

Webフォントを外部から読み込んでいることが原因で、混合コンテンツ問題が起きています。

たしかに、外部からフォントを使おうとするとCORSの設定も必要となりますが、今回の場合はそれではなく、HTTP/HTTPSの混在がエラーの原因です。

外部サーバがCDNサービスであれば、おそらくHTTPS参照に変えるだけで通るようになるでしょう（いまどき、HTTPでしか使えないCDNはあまり使い物になりません）。

どうしても無理なら、いったんファイルをダウンロードしてきて同じサーバに置く方法もありです。

Comments

[MASA08]

ご回答ありがとうございます。初めて他人から回答がきたので私は嬉しい限りです！！
実は私、全くの新米エンジニアでありまして、「HTTPS参照に変える」の部分のイメージが掴めないのですが具体的にはどういったことでしょうか？？
面倒をおかけしますがよろしくお願いします。

[maisumakun]

CSSファイルに書いてあるフォントファイルのURLを「http://」から「https://」に変えてみましょう。

[MASA08]

外部サーバが古すぎて、HTTPS参照に対応していなかったので、ファイルをダウンロードする方針に変えたいと思います。

[MASA08]

ご回答ありがとうございました！助かりました！