Elementorで編集画面で適用したGoogleフォントが、プレビューや実際のWEBページで適用されないことがあります。
ここではこの原因と対処法についてまとめています。
前提条件
前提条件として、Elementorの設定画面でGoogleフォントが有効化されているものとします。
原因はmixed content
この原因は、mixed content（混在コンテンツ）である可能性が高いです。
ほとんどのブラウザは、セキュリティ上の理由から、httpsページ内で、httpとして読み込まれるリソース（フォントやスクリプトなど）をブロックします。
WEBサイトはhttps化しているのに、Googleフォントの読み込みがhttpで行われている場合に発生します。
このように、httpsの中にhttpのリンクやURLなどが含まれていることを「mixed content（混在コンテンツ）」といいます。
開発モードで、Consoleを確かめると「Mixed Content」のエラーが発生しています。
エラーが発生しているURLはelementorのgoogle-fontsとなっています。
なぜ発生したか？
これは、WordPressをインストールした時点ではSSL化しておらず、httpで作成し、その後SSL化してドメインをhttpsに対応させた場合に発生します。
WordPressの管理画面で「設定 → 一般」でWordPressアドレス（URL）とサイトアドレス（URL）をhttpsに変更しても、Elementorのもともとの設定が置き換わらなかったことが原因です。
WordPressアドレス（URL）とサイトアドレス（URL）をhttpからhttpsにする方法については下記をご参考ください。
対処法
これは、データベース内に残っている古いhttp://のURLを、正しいhttps://のURLにすべて書き換えることで解決します。
Elementorのツール機能を使うと簡単で確実に修正することができます。
WordPressの管理画面から「Elementor」→「ツール」に進みます。
「URLを変更」タブを開き、「旧URL」にhttp://サイトURL、「新URL」にhttps://サイトURLを入力します。
「URLを置換」ボタンをクリックします。
該当URLがあった場合、置換した数が表示されます。
これにより、データベース内のURLを一括で安全に書き換えることができます。
これだけではCSSが上手くリセットされないことがあるので、Elementorのツールの「一般」タブのElementor Cacheで「ファイルとデータの削除」も実行します。
以上で対応は完了です。
サイトをリロードすると、Googleフォントが無事適用されます。
