【ITニュース解説】Why I Switched From Google Fonts CDN to Self-Hosting (and Never Looked Back)
2025年09月07日に「Dev.to」が公開したITニュース「Why I Switched From Google Fonts CDN to Self-Hosting (and Never Looked Back)」について初心者にもわかりやすいように丁寧に解説しています。
ITニュース概要
Google FontsをCDN経由で使うとサイトが遅くなる場合がある。自分でFontファイルをサーバーに置き、CSSで指定(@font-face)することで、外部へのアクセスを減らし、表示速度を改善できる。フォント形式はwoff2がおすすめ。CSS変数でフォントを管理すると変更も容易。設定を工夫すれば、PageSpeed Insightsのスコア向上が期待できる。
ITニュース解説
ウェブサイトの表示速度は、ユーザーエクスペリエンス（UX）と検索エンジンのランキングに大きく影響する。Google Fontsは簡単に使えるフォントサービスだが、実はウェブサイトの速度を遅くする原因になることがある。この記事では、Google FontsをCDN（コンテンツ配信ネットワーク）経由で利用するのをやめ、自社サーバーでホスト（self-hosting）する方法とそのメリットについて解説する。
従来のGoogle Fontsの利用方法は、ウェブサイトからGoogleのサーバーにフォントファイルを要求する形で行われる。これは簡単だが、ウェブサイトの読み込み時に外部サーバーへの接続が必要になるため、遅延が発生しやすい。特に、複数のフォントや太さ（ウェイト）を使用している場合、リクエストの数が増え、表示速度に大きな影響を与える。
自社サーバーでGoogle Fontsをホストする主なメリットは以下の通り。
- パフォーマンスの向上: 外部サーバーへのリクエストが減るため、ウェブサイトの読み込み時間が短縮される。
- Font-displayの完全な制御: フォントの読み込みタイミングを細かく制御できるため、レイアウトシフト（文字が表示される際にレイアウトが崩れる現象）を防ぐことができる。
- プライバシーの保護: Googleのサーバーにアクセスしなくなるため、GDPR（EU一般データ保護規則）などのプライバシー規制に準拠しやすくなる。
- デザインの一貫性: 常に特定のバージョンのフォントを使用できるため、Google Fontsの自動更新によるデザインの変化を防ぐことができる。
具体的な手順は以下の通り。
- Google Fontsからフォントファイルをダウンロード: Google Fontsのウェブサイトから必要なフォントのTTFファイルをダウンロードする。必要な太さやスタイル（イタリック体など）も忘れずにダウンロードする。
- .woff2形式に変換: ダウンロードしたTTFファイルを、より効率的な.woff2形式に変換する。オンラインの変換ツールを利用すると簡単に変換できる。.woff2形式は、現代のブラウザで広くサポートされており、高い圧縮率を誇るため、ウェブサイトのパフォーマンス向上に貢献する。
- WordPressにフォントフォルダを作成: WordPressのインストールディレクトリにある「/wp-content/」フォルダの中に、「fonts」という名前の新しいフォルダを作成する。ここに変換した.woff2ファイルをアップロードする。
- CSSで@font-faceを定義: WordPressのテーマのスタイルシート（style.css）に、@font-faceルールを追加して、ダウンロードしたフォントを登録する。@font-faceルールでは、font-family（フォント名）、font-style（スタイル）、font-weight（太さ）、font-display（表示方法）、src（フォントファイルのURL）などを指定する。font-displayプロパティには、「swap」を指定することで、フォントがダウンロードされるまでの間、代替フォントを表示し、レイアウトシフトを防ぐことができる。
- CSS変数（カスタムプロパティ）を定義: CSS変数を使用すると、フォントの管理が容易になる。:root疑似クラス内で、フォント名や太さなどを変数として定義する。
- CSSでフォントを適用: 定義したCSS変数を使用して、ウェブサイトの要素にフォントを適用する。例えば、body要素にフォントを指定したり、見出し要素（h1、h2など）に別のフォントを指定したりする。
設定が終わったら、ブラウザのデベロッパーツールなどを利用して、フォントが自社サーバーから読み込まれていることを確認する。
さらに、以下の点に注意すると、より効果的。
- 適切なヘッダーを設定: サーバーの設定で、woff2ファイルに適切なMIMEタイプ（font/woff2）を設定する。
- フォントのプリロード: 重要なフォントは、HTMLの
<head>セクションでプリロードすることで、さらに表示速度を向上させることができる。<link rel="preload">タグを使用し、as属性に"font"、type属性に"font/woff2"を指定する。 - 使用するウェイトを絞る: 多くのウェイトを使用すると、フォントファイルのサイズが大きくなり、パフォーマンスに影響を与える可能性がある。必要なウェイトのみを使用するように心がける。
Google Fontsを自社サーバーでホストすることで、ウェブサイトのパフォーマンスを向上させ、ユーザーエクスペリエンスを改善することができる。また、プライバシー保護の観点からも、この方法は推奨される。この記事で解説した手順を参考に、ぜひ試してみてほしい。