Elementorでページを作成するとき、多くの人が問題に遭遇します。エディタで設(shè)定したフォントは問題なく見えるのに、フロントエンドのページではデフォルトのフォントが表示されたり、フォントスタイルがまったく表示されなかったりします。このよくある原因の1つは、テーマのCSSスタイルがElementorのフォント設(shè)定を上書きしてしまうことです。

この記事では Elementorのフォントが機(jī)能しない一般的な現(xiàn)象、およびフォントの異常を素早く修正するのに役立つ、トラブルシューティング用のテーマスタイルオーバーライドのセットを提供します。

まず、フォントは一般的な性能を示していない。

• フロントページのフォントはすべてシステムのデフォルトフォント（例：Times New Roman）で表示されます。

• エディターでは問題なく表示されるが、フロントエンドでは一貫性がない。
• 一部のモジュールフォントだけが正しく、他のフォントはロードされない。
• エレメンターのグローバルフォントセッティングが機(jī)能しない

このような問題のほとんどは、テーマ內(nèi)のCSSスタイルがフォントの読み込みに影響を與えることが原因です。

テーマのCSSがElementorのフォントスタイルを上書きするのはなぜですか？

WordPressのテーマは通常 スタイル.css あるいは、例えばフレームワークのスタイル?ファイルにグローバル?フォントの設(shè)定を書き込む：

ボディ
  font-family: 'Noto Sans', sans-serif; }.
}

このタイプのスタイル定義はサイト全體に影響します。Elementor がより強(qiáng)いセレクタを介して宣言されていないフォントを使用する場合、ページ?フォントはテーマ?スタイル交換。

テーマによっては（Astra、Kadence、Blocksyなど）、フォントコントロールを獨(dú)自にサポートしており、テーマ設(shè)定パネルのタイポグラフィ設(shè)定がElementorの設(shè)定を上書きすることもあります。

第三に、フォントスタイルがオーバーライドされているかどうかをチェックする方法である。

方法 1: ブラウザの開発者ツールを使用してスタイル ソースを表示する

• フロントページを開く
• フォント表示に異常のあるテキストを右クリックし、「チェック」を選択する。

• スタイルパネルまたは計算パネルを見てください。 フォントファミリー タイプ

• スタイルがどのファイルから來ているのかを観察する：
  • ソースが テーマ.css もしかしたら スタイル.css説明ごかんけいせいぼおん
  • もしそうなら エレメンタ?フロントエンド.cssこれは、Elementorの設(shè)定が正常であることを意味します。
  • もしあれば 重要記述スタイルは強(qiáng)制的に上書きされる

また、セレクターが ボディそしてエントリー?コンテンツそしてサイトコンテンツ など。通常、これらはテーマによって定義されたグローバルスタイルである。

方法2：テーマの組版設(shè)定をチェックする

アストラのテーマを例にとろう：

• 外観 > カスタマイズ > グローバル > に移動する。 タイポグラフィ

• ボディフォントが特定のフォントに設(shè)定されているかどうかを確認(rèn)するには

• すでに設(shè)定されている場合は、「継承」に変更するか、フォント設(shè)定を削除してElementorにスタイルを引き継がせることができます。

その他、ケイデンスなど、ブロックシーOceanWPなどにも同様のセットアップパスがある。

方法3：エディターとフロントエンドのフォントを比較する

• フォントが適用されているか確認(rèn)するために、Elementorエディタを開く
• 一貫性を保つためにフロントページの表示を比較する
• 一致しない場合は、スタイルが外部でオーバーライドされています。

4つ目は、メソッドのフォントをオーバーライドするようにテーマのCSSを修正する。

1.Elementorで直接フォントを設(shè)定する

デフォルトまたは継承されたオプションを使用せずに、各モジュールでフォントを明示的に選択します：

パス： スタイル > タイポグラフィ > フォントファミリ > 特定のフォントを選択する

この方法でElementorはインラインスタイルを生成し、外部スタイルによって上書きされるのを防ぎます。

2.使用カスタムCSS スタイルの優(yōu)先度を上げる

Elementor Proユーザーは、例えばモジュールにカスタムスタイルを追加できます：

セレクタ
  font-family: 'Roboto', sans-serif !important；
}

無料版をお使いの場合は、グローバルスタイルプラグインの助けを借りて同様のコードを追加することができます。

3.テーマレイアウト機(jī)能を無効にする

テーマによっては、グローバルフォント機(jī)能をオフにすることができます：

• アストラ：外観 > カスタマイズ > グローバル > タイポグラフィ > Googleフォントを無効にする
• ブロックシー：外観 > カスタマイズ > タイポグラフィ > フォントを継承に設(shè)定

継承に設(shè)定すると、テーマはフォントの制御を強(qiáng)制しません。

4.プラグインを使ってテーマのスタイルファイルを無効にする（上級者向け）

以下のプラグインを使用して、CSSの読み込み動作を管理することができます：

• 資産のクリーンアップ不要なテーマCSSファイルの読み込みを無効にする

• シンプルなカスタムCSSとJS：カスタムスタイルをページに追加して優(yōu)先度を上げる

V. まとめ

Elementorのフォントが表示されないこれらの問題のほとんどは、テーマスタイルのオーバーライドや壊れた継承ロジックが原因です。ブラウザの開発者ツールを使ってフォントのソースをチェックし、テーマのタイポグラフィ設(shè)定を調(diào)整して正確なフォントスタイルを指定することで、フォントが有効にならない問題を素早く解決することができます。

もしあなたも同じような狀況に遭遇したら、上記の調(diào)査?調(diào)整方法を參考にして、スタイルの衝突の原因を突き止め、均一で安定したフォントレンダリング効果を得ることをお勧めします。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時間: 月～金、9:30～18:30、祝日休み