フォント設定後にElementorのスタイルが失われる？CSSを手動で追加する正しい方法

作動中 エレメンタ ページを作るとき、多くの人が問題に遭遇する：フォントは明確に設定され、エディタではすべてうまくいっているのに、フォアグラウンドになったとたんにすべてがめちゃくちゃになる。あるものはデフォルトのフォントになり、あるものは単に何の効果もない。このような状況は、ほとんどの場合、テーマのスタイル、キャッシュ、または読み込みの優先順位に関連しています。今回は直接 カスケーディングスタイルシート フォントのスタイルを手動で制御し、最も直接的で効果的な方法でフォントの問題を解消します。

1.設定してもフォントが効かないのですが？

WordPressでは、フォントスタイルは複数の場所から取得できます：

• 現在のテーマのスタイルシート（例：Hello、Astra、Blocksyなど）
• エレメンターのグローバルフォントセットアップ
• 各モジュールのフォント設定
• プラグインによって注入される外部スタイル

これらのスタイルは互いに上書きすることができ、いずれかのルールが 重要 あるいは、後のオーダーでロードされる可能性がある。 エレメンタ プレス "セクションで設定したフォントが "プレス "される。

したがって、フォントスタイルを一貫して表示させたい場合、最も簡単な方法は、手動で カスケーディングスタイルシートそして、それが優先順位十分に高い。

2.現在のフォントをカバーしているのは誰か

ウェブサイトのトップページを開き、テキストを右クリック→「Inspect Element」（Chrome）を選択する。

対応するテキストタグをデベロッパーツール（F12）で表示するには、CSSパネルの右側にある フォントファミリー はどのスタイルファイルからのもので エレメンタ またはテーマのものです。Elementorのフォントを消し、テーマのフォントに 重要 フラグが立っていれば、それはオーバーライドを強制するトピックということになる。

そのようなときに最も適切なのは、自分自身のパラグラフを書くことである。 カスケーディングスタイルシート私はフォントを "つかみ "返すつもりだ。

3.CSSはどこに追加するのですか？

カスタムCSSを追加するのにお勧めの場所は3つあります：

方法1：WordPressバックエンド → 外観 → カスタマイズ → CSSの追加
Elementorに依存しない、サイト全体の一般的なスタイル変更に適しています。

方法2：Elementor Editor → 左メニューの設定 → カスタムCSS
現在のページやモジュールのスタイルだけを調整するのに理想的です。

方法3：特定のモジュールにCSSクラス名を設定する
モジュール詳細設定それにクラス名を追加し、CSSでそのクラスを正確に制御する。

4.CSSの例：フォントを安定して表示させる

すべての段落テキストに「PingFang SC」フォントを使いたいと仮定すると、次のスタイルを追加できます：

p {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important；
  font-size: 16px；
  font-weight: 400; }.
}

に掲載された。 重要 がキーであれば、他のソースからのフォント・スタイルを強制的に上書きします。また、IDやクラス名を使って、より重みを持たせることもできます：

.elementor-widget-text-editor p { {.
  font-family: 'Roboto', sans-serif !important；
}

同じフォントを使うモジュールが複数ある場合、それらを一つのクラス名に統一することは有意義かもしれません。 .site-font-defaultそして経営陣を一本化する。

.site-font-default {
  font-family: 'Open Sans', sans-serif !important; font-size: 15px; font-family: 'Open Sans', sans-serif ！
  font-size: 15px; font-family: 'Open Sans', sans-serif !
}

モジュールの "Advanced "オプションにクラス名を追加する。 サイトフォントデフォルト.

5.よくある間違いを避ける

• フォントのスペルミス：フォント名のスペルが正しく、大文字と小文字が一致していることを常に確認する。
• フォント参照の欠落カスタムフォント最初にElementorかプラグインを使うことを忘れずに。フォントのアップロードそうでなければ、ブラウザはフォントが見つからない場合、デフォルトを表示します。

• キャッシュがリフレッシュされない: スタイルを変更した後は、Elementorのキャッシュをクリアし、ページをリフレッシュして効果を確認することを忘れないでください。
• フォントの読み込み順の問題：Google Fontsのような外部フォントの場合、フォントリソースがページヘッダに読み込まれていることを確認してください。

6.積載効率向上のヒント

フォントを手動で設定する場合は、次のようにしてください：

• すべてのウェイトではなく、レギュラーとボールドのみなど、必要なウェイトのみをロードする。
• 代替フォントとしてシステムフォントを使う。 font-family: 'Roboto', Arial, sans-serif；
• フォントリソースをローカルに配置するか、安定した シーディーエヌローディングの失敗を避ける

概要

Elementorのフォント設定が欠落している場合、他のスタイルが「脚光を浴びている」可能性が高い。繰り返し修正する代わりに カスケーディングスタイルシート 自分でコントロールする適切なスタイルとウェイトで適切なターゲット要素を見つけさえすれば、フォント表示の問題は基本的に解決できる。一度調整が済めば、後はわざわざいじる必要はない。

最近の更新

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