WordPressでGoogle Fontsをセルフホストする方法

GoogleのサーバーからGoogle Fontsを読み込むと、訪問者のIPアドレスを送信するサードパーティ接続が発生します。EU圏の訪問者を対象とするサイトでは、これがGDPRの懸念事項となります。セルフホスティングにより、この接続を完全に排除し、キャッシュと配信を自分で制御できるようになります。

本ガイドでは、WordPressでフォントをローカルにホストする3つのアプローチを説明します:ブロックテーマ用のネイティブFont Library、クラシックテーマ用の手動実装、そしてプラグインの代替案についての簡単な説明です。

なぜGoogle Fontsをセルフホストするのか?

訪問者がサイトを読み込むと、ブラウザはfonts.googleapis.comおよびfonts.gstatic.comからフォントを取得します。各リクエストは、訪問者のIPアドレスをGoogleのサーバーに送信します。

セルフホスティングは、フォントファイルを自分のサーバーに移動します。メリットは以下の通りです:

• プライバシーコンプライアンス: 文書化または正当化が必要なサードパーティへのデータ転送がありません
• パフォーマンス制御: 独自のキャッシュヘッダーを設定し、プリロードを使用できます
• 信頼性: 外部サービスへの依存がありません

GoogleのCDNと適切に設定されたローカルセットアップとのパフォーマンス差は、通常最小限です。ほとんどのサイトにとっての主な推進要因は、速度ではなくGDPRコンプライアンスです。

ブロックテーマ: ネイティブFont Libraryを使用する

WordPress 6.5以降には、フォントをダウンロードしてローカルで配信するFont Libraryが含まれています。これはブロックテーマにとって最もシンプルなアプローチです。

手順:

1. 外観 → エディターに移動
2. スタイル(右上隅)→ タイポグラフィを開く
3. フォントを管理 → フォントをインストールをクリック
4. フォントを検索し、必要なウェイトを選択して、インストールをクリック

WordPressはWOFF2ファイルをwp-content/fonts/にダウンロードし、テーマの設定に登録します。インストール後、外部接続は発生しません。

制限事項: これはブロックテーマでのみ機能します。クラシックテーマには手動実装が必要です。

クラシックテーマ: 手動実装

クラシックテーマの場合、フォントをダウンロードしてCSSを自分で記述します。

フォントファイルのダウンロードと変換

1. Google Fontsにアクセスし、フォントを選択してダウンロード
2. ダウンロードにTTFファイルが含まれている場合、google-webfonts-helperまたはTransfonterを使用してWOFF2に変換
3. テーマにファイルをアップロード: wp-content/themes/your-theme/fonts/

CSSでフォントを登録

テーマのstyle.cssまたはカスタムスタイルシートに以下を追加します:

@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

主要なプロパティ:

• font-display: swap: フォールバックテキストを即座に表示し、フォントが読み込まれたら切り替えます。不可視テキストを防ぎます。
• font-weight: 100 900: 可変フォントの場合、1つのファイルで全ウェイト範囲を宣言します。

静的フォントの場合、使用する各ウェイトに対して個別の@font-faceルールを作成します。

フォントを適用

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

常にシステムフォントのフォールバックを含めてください。

リモート読み込みを無効化

DevTools(F12)を開き、Networkタブに移動し、Fontでフィルタリングして、リロードすることで、リモートフォントが読み込まれていないことを確認します。fonts.gstatic.comへのリクエストを探してください。

テーマがGoogle Fontsをリモートで読み込んでいる場合、無効化オプションがないか設定を確認してください。それ以外の場合、functions.phpでスタイルシートをデキューするか、Disable and Remove Google Fontsのようなプラグインを使用する必要があるかもしれません。

プラグインの代替案

いくつかのプラグインがローカルフォントホスティングを自動化します:

• OMGF (Optimize My Google Fonts): フォントを自動的に検出してダウンロード
• Local Google Fonts: サブセットサポートを備えた同様の機能
• WP Rocket: メディア設定にワンクリックオプションを含む

プラグインは、テーマやページビルダーが手動でオーバーライドするのが難しい方法でフォントを読み込む場合に効果的です。必須ではありません — 上記の方法はプラグインなしで機能します。

ベストプラクティス

WOFF2を優先: WOFFより約30%優れた圧縮を提供し、97%以上のブラウザサポートがあります。IE11サポートが必要でない限り、古い形式はスキップしてください。

可能な場合は可変フォントを使用: 1つのファイルですべてのウェイトをカバーし、HTTPリクエストを削減します。

プリロードは控えめに: ファーストビューで使用されるフォントのみをプリロードします:

<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>

crossoriginを条件付きで含める: サーバーが適切なCORSヘッダーを送信する場合のみ追加してください。

@importを避ける: レンダリングをブロックします。代わりに<link>タグまたは@font-faceを使用してください。

まとめ

ブロックテーマの場合、WordPress Font Libraryがすべてを処理します — エディターでフォントをインストールすれば完了です。クラシックテーマの場合、WOFF2ファイルをダウンロードし、@font-faceルールを記述し、リモート接続が残っていないことを確認します。

セルフホスティングにより、フォント配信を完全に制御でき、サードパーティへのデータ転送を排除できます。実装には数分しかかからず、結果としてよりクリーンでプライバシーを意識したサイトになります。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.