Elementorのフォントが表示されない？サーバーと CDN の設定を一度に把握しましょう！

Elementorを使用してウェブサイトを構築しているウェブマスターの多くは、この問題に遭遇するでしょう：ページにGoogleフォントまたはカスタムフォントを設定した後、フロントエンドはそれらを表示しないか、ブラウザがエラーを報告します。フォント読み込み失敗.これは通常、サーバーの設定やシーディーエヌ関連の設定

一般的な症状：フォント負荷不良現象

コンソールがエラーを報告する：リソースのロードに失敗しました: net::ERR_BLOCKED_BY_CLIENT もしかしたら 403 禁止
このフォントスタイルはエディターのプレビューでは問題なく機能しますが、フォアグラウンドでアクセスするとデフォルトのフォントになります。
フォントアドレスがCDNに飛ぶがロードされない
国や地域によっては、フォント資源へのアクセスが遅い、あるいは完全にできない。

このような問題は珍しくない。クラウドフレアまたは、国内のアクセス速度最適化設定が使用されている場合。

考えられる原因の分析

1.サーバーがフォントリソース要求をブロックする

特定のサーバーは、Apacheの .htaccess(Nginxのヘッダー設定）をブロックする。 .woffそして.ttf などのファイルがドメイン間で読み込まれる。レスポンスヘッダに アクセス制御-許可-オリジン：*。.

解決策
もしアパッチこれは .htaccess ファイルには以下が追加された：

の場合
  にマッチします。
    ヘッダーセットアクセスコントロール-許可-オリジン "*"
  </FilesMatch
</IfModule

2.CDNキャッシュがフラッシュされず、フォントパスと同期されない。

サイトへのアクセスシーディーエヌフォントファイルが正しくキャッシュされていなかったり、パスが古いリソースを指していたりすることがあります。特に、フォントファイルが置き換わったばかりであったり、フォント設定が変更されたばかりであったりすると、CDNノードが最新のファイルと同期していない可能性があります。

解決策

CDNコンソールへのアクセス（Cloudflare、Tencent Cloud、Aliyunなど）
キャッシュの消去

フォントファイルのパスを強制的に更新する（例 /wp-content/uploads/fonts/)

3.Elementorの外部フォント読み込みを無効にしました。

エレメンタル・プロパフォーマンス設定で外部フォントの読み込みを無効にするフォント最適化機能が提供されています。このオプションが有効で、ローカルフォントがアップロードされていない場合、フォントは正しく表示されません。

解決策

Elementorの設定 > Lab (または機能)に移動します。

非アクティブなGoogleフォント」がオンになっていることを確認してください。

オンになっている場合は、必ずアップロードしてください。カスタムフォントにバインドし、対応する要素にバインドする。

4.グーグルフォントへの国内アクセスをブロック

あなたのサイトが中国本土のユーザーを対象にしている場合、アクセスが制限されていたり、遅かったり、あるいはまったく機能していなかったりするため、おそらくGoogle Fontsでは読み込まれないだろう。

解決策

以下のような国内のミラーリングサービスを利用する。 fonts.loli.net
または、フォントをローカルにダウンロードし、Elementor Proの「カスタムフォント」機能を使ってアップロードしてバインドします。

推奨規範：フォント・リソース・ロードの最適化

ローカルにフォントを配置：安全、高速、外部リソースに依存しない
クロスドメインヘッダーの有効化：フォントローディングにおけるCORS問題の回避
CDNキャッシュルールを賢く設定する。 .woffそして.woff2 Isofontファイルは長時間キャッシュされるように設定されています。

フォントパスのバージョン番号を設定する：古いファイルのCDNキャッシュを避ける
フォントの使用プリロード(プリロード）：最初のページのレンダリング速度を上げる。

プリロード・タグの例：

。

概要

エレメンタル・フォント読み込みの不具合はプラグイン自体の問題ではなく、サーバーやCDN、リソースソースに密接に関係している場合があります。これらの根本的なロジックを理解することで、当面のフォント問題を解決し、その過程でサイト全体の読み込み効率を向上させることができます。

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