elementor編集画面ではフォントが適応されているのに、プレビューしてみるとフォントが反映されていない!デフォルトフォントになっている!
そんな時の解決方法をご紹介します!
※今回はGoogle Fonts(グーグルフォント)を使っている場合に限ります。
特にフォント設定をいじっておらず、デフォルトのままで、elementor上のウィジットで「noto sans jp」とか「zen kaku…」とかを選択している場合です。
なぜフォントが適応されていないのか?
ズバリ、SSL化されていない!
大体の場合、これがアンサーです。
なぜSSL化されてないことがフォントに関係するのか?
Elementorは通常設定であれば Google Fonts(グーグルフォント) を使っています。
Google FontsはHTTPSで配信されています。
サイト本体がHTTPのままで、フォントがHTTPSだと、
安全でないページに安全なコンテンツが混ぜってる!危険!(混在コンテンツ)
とブラウザに判断されてしまうのです。
結果、フォントがブロックされてデフォルトフォントで表示されてしまうというわけです。

解決方法 – 3ステップでSSL化しよう
では実際にSSL化をやってみましょう。
3ステップでサクッとできます。
1- URLに「s」を追加
ダッシュボード左側 設定 > 一般 から
・WordPress アドレス (URL)
・サイトアドレス (URL)
今ここが http:// になっているかと思いますので、
どちらも http「s」:// を手動で入力してください!
できたら「変更を保存」をクリック。

2- パーマリンクを更新
同じく 設定 > パーマリンク を開きます。
ここは投稿のパーマリンクをどの構造にするかの設定ですが
ここを一回保存してあげることで、確実にSSL化が適用されます。
各項目がhttps:// になっていることを確認し、何も変更しないでいいので「変更を保存」をクリック。

※http:// のままだったら、1のURLに「s」を追加をもう一度トライしてみてください。
3- リンク変更
ダッシュボード左側 elementor > ツール から、「URLの変更」タブをクリック。
・上の入力欄:古いURL( http://〜サイトのドメイン〜 )
・下の入力欄:新しいURL( https://〜サイトのドメイン〜 )
を入力します。
ドメインにまちがいないか、下の入力欄は「s」が入っているか、しっかり確認してくださいね。
OKなら「URLを変更」をクリック。

これで http://~ になっていたところを、全て https://~ に書き換えてくれます。
一応キャッシュしとく
念のためですが、同じく elementor > ツール > 一般 から
Elementor Cache 「ファイルとデータの削除」を一応実行しておくと良いです。
これで一時保存されていたものが削除され、最新状態のサイトを表示してくれます。

一応確認しておきたいところ
もしSSL化してもデフォルトフォントのまま!と言う場合は下記も確認してみてください。
Google fonts が 有効か
そもそもgoogle fontsを使う設定になっていなかった!と言うことも考えられます。
Elementor > 設定 > 高度な設定 から
Google Fonts が「有効化」になっていることを確認!
もしここが「無効化」になっていると、Google Fonts が読み込まれずデフォルトフォントしか適用できない状態になっちゃいます。

※有効化がデフォルトなので、特にいじってなければ問題ないはずです。
まとめ
他にも
・キャッシュ削除
・Google fontsの設定が有効になってるか
を確認しましょう!
もしそれでもダメな場合は
・最適化系プラグイン
・サーバー側の設定
などが干渉している可能性もありますので、確認してみてください。
他にも何かあればぜひコメントしてくださいね〜
本日もお疲れ様でした!