WordPressサイトでフォントをホスティングする方法はさまざま。ローカルでホストしたり、Google Fonts（ほとんどのWordPressテーマに統合）を使用したり、Adobe Fontsのようなサードパーティサービスを利用したりすることができます。今回は、WordPressサイトでローカルフォントをホスティングする利点を詳しくご紹介します。HTMLフォントの選択肢が増えるだけでなく、パフォーマンスの面でもメリットがあります。また、Google Fontsのフォントファミリーだけでなく、有料フォントをローカルでホスティングする方法も見ていきます。

ウェブフォントとは

WordPressサイトのテキストには、ウェブセーフフォントかウェブフォントのどちらか、または両方が併用されています（WordPressでフォントを変更する方法はこちら）。

  • ウェブセーフフォント：デバイスやOSにデフォルトでインストールされており、ウェブ上で一般的に目にするフォント。Arial、Times New Roman、Courier New、serif、sans-serif（モダンフォントの詳細はこちら）、monospaceなどの一般的なフォントファミリーが該当する。ウェブセーフフォントの詳細はこちら。
  • ウェブフォント：デバイスにインストールされておらず、ブラウザがダウンロードして表示する必要のあるフォント。GoogleのOpen SansやRoboto、Adobe Fontsの人気フォントProxima Novaなどがこれにあたる。

Google Fontsは、オープンソースのフォントディレクトリで、ここ数年で広く使用されるようになりました。BuiltWithによると、上位1万件のサイトの45%以上がGoogle Fontsを使用しており、Google Fontsの分析データを見ると、17兆ビューを超えています。Open SansとRobotoが特に人気た高く、後者はこの1年で77%も使用率が向上しています。数字で見るおすすめのGoogle Fontsはこちらをご覧ください。

Google Fontsの統計データ
Google Fontsの統計データ

ローカルフォントとサードパーティサービスの比較

ローカルフォントをホスティングするのと、単にサードパーティサービスを利用するのではどちらが良いのでしょうか。ローカルでフォントをホスティングするということは、フォントファイルを自分のサーバーに置くことを意味します（他のアセットにも使用しているCDNにコピーすることも可能）。一方、Google FontsやAdobe Fontsなどのサードパーティサービスを利用する場合は、外部アセットにリンクすることでフォントを表示します。以下、ローカルフォントの利点と欠点をご紹介します。

ローカルフォントの利点

1. フォントの選択肢が豊富

ローカルフォントを使用する大きな強みは、フォントの選択肢が格段に広がることにあります。Google FontsやAdobe Fontsのようなのサービスも多数のフォントを提供していますが、気に入ったウェブフォントを購入してサイトでホスティングする自由度には敵いません。記事の後半で、購入したフォントを使用する方法をご紹介します。

2. デザインに適したフォントを選べる

フォントの選択肢が広がることから、サイト全体の一貫性を考慮し、妥協せずにサイトデザインに合うフォントを選ぶことができます。

3. サードパーティサービスに依存する必要がない

フォントをローカルでホスティングすれば、サードパーティのサービスやサーバーに依存する必要がなくなります。Adobe Fonts（旧Typekit）のようなサービスは、時折ダウンすることがあり、サイトに悪影響を与える可能性があります。WordPressサイトにとって、依存する要素が少ないというのは良いことです。

4. キャッシュを完全に制御できる

ローカルフォントを使用することで、フォントファイルのキャッシュを完全に制御可能です。Google Fontsなどのサービスを利用している場合、リソースにキャッシュの検証がない、またはExpiresヘッダーが必要であるというエラーや警告が表示されることがあります。これはサーバーレベルで修正が必要になるため、サードパーティサービスを利用している場合、これを解決することはできません。

「Specify a cache validator」の推奨メッセージ
「Specify a cache validator」の推奨メッセージ

5. リクエストの数が減ることでパフォーマンスに有利

ウェブフォントは、外部からダウンロードする必要があるため、サイトの読み込み速度に影響を与える可能性があります。外部のサーバーがどの程度の速度で動作しているかはわかりませんが、WordPress専用サーバーを利用することで、この点を制御することができます。例えば、Adobe Fontsは2つの外部HTTPリクエストを送信し、すべてのフォント形式をbase64エンコードします。フォントについてあまり詳しくない場合は、すべてのフォント形式を提供せず、WOFFとWOFF2（圧縮を重視する場合はこちら）だけを使用すればOKです。

Google Fontsを使用すると、CSSファイルを取得するためにfonts.googleapis.comを検索するDNSリクエストが1つ追加されます。さらに、フォントファイルのダウンロードに、fonts.gstatic.comへのリクエストが追加されます。フォントをローカルでホスティングすれば、すべてのリクエストが同じドメインから行われます。WordPressテーマのCSSファイル内にあるため、別のCSSは通常不要です。

Google FontsのHTTPリクエスト
Google FontsのHTTPリクエスト

6. 単一のHTTP/2接続

HTTP/2の利点はこちらでご紹介していますが、フォントをローカルまたはCDNでホスティングすることで、単一のHTTP/2接続を利用し、より優れた並列性と多重化を実現することができます。

ローカルフォントのデメリット

ローカルフォントには、以下のような注意点もあります。

1. Google Fontsはすでにキャッシュされている可能性がある

Google Fontsは独自のCDNを使用しており、高速です。多くのウェブサイトがGoogle Fontsを使用していることから、訪問者がすでにブラウザのキャッシュに同じフォントを持っている可能性が非常に高くなります。したがって、場合によってはこだわりの有料フォントを使用する方が、ダウンロード時間が長くなる可能性があります。例えば、誰かがGoogle FontsのRobotoフォントを使用するサイトに訪問すると、フォントがキャッシュにダウンロードされます。その後、同じくRobotoを使用する自分のサイトに訪れた際には、フォントを再度ダウンロードする必要はありません。しかし、Proxima Softのような有料フォントを使用している場合は、ダウンロードが必要になる可能性が高く、その分表示速度に影響が出ます。

重要な点として、あまり使用されていない有料フォントを使用する場合、初めてサイトを訪れる訪問者のブラウザは、フォントをダウンロードする必要があることを考慮しましょう。注）Robotoのような人気Google Fontsをローカルにホスティングする場合は、ブラウザがキャッシュに保存されたフォントを検出するため例外。

2. 追加の設定が必要になる可能性がある

ローカルフォントをホスティングするには、追加の設定が必要になることがあります。例えば、WordPressのテーマが自動的にGoogle Fontsを呼び出すことがあり、サイト上で呼び出されないようにしなければなりません。テーマの開発者に連絡をとり、簡単なコードを書いてもらう必要があります（この方法については後ほど）。

3. フォントの選択には注意が必要

ローカルフォントをホストする場合、どのフォントタイプをサポートするかを選択する必要があります。例えば、WOFF2は多くの古いブラウザでサポートされていないため、古いウェブセーフフォントがフォールバックされます。CanIUseによると、IE11、Safari、Android Browserの一部のバージョンでは、WOFF2のウェブフォントしか使用できないという問題があります。これを考慮して、WOFFとWOFF2の両方を使用するのが賢明です。WOFF2はより圧縮率が高くなります。

WOFF2のブラウザサポート
WOFF2のブラウザサポート

サードパーティサービスを使用する場合、ブラウザのサポートが考慮されているため、このような心配は通常必要ありません。この点は、ローカルでフォントをフォスティングする際に注意が必要です。

4. CDNを使用する必要がある

現在、CloudflareやKeyCDNなどのCDNサービスを利用して、アセットの配信を高速化するのは一般的です。CDNはレイテンシとDNSルックアップにかかる時間を短縮するために欠かせない技術です。CDNなしでローカルフォントを使用すると、CDNを使用するGoogle FontsやAdobe Fontsのようなサービスよりも、サイト速度が遅くなる可能性があります。地理的に限られた範囲からのアクセスしかない場合を除いて、独自のフォントをホスティングする際には、CDNを使用してください。また、HTTP/2対応のCDNサービスを選択することをお忘れなく。

KinstaのCDNはHTTP/2対応で、すべてのプランにデフォルトで付帯しています。

WordPressでローカルフォントをホスティングする方法

それでは、WordPressサイトでローカルフォントをホスティングする方法をご紹介していきます。購入したフォントを使用する方法とGoogle Fontsを使用してローカルでホスティングする方法の2つを見ていきます。今回は例として、Twenty Seventeenテーマをインストールした新規WordPressサイトを使用します。

1. 購入したフォントをローカルでホスティングする方法

Fontspringと2017年1月にリリースされたProxima Softフォントを使用して手順をご紹介します。Mark Simonson氏によって作成された後者のフォントは、Proxima Novaの新バージョンで、サードパーティのトラッキングスクリプトを必要とせず、1回限りの購入で無制限に使用できます。フォントを購入する際は、サードパーティのトラッキングスクリプトを必要しないものを選択することをお勧めします。

Fontspring
Fontspring

基本的には、ほとんどのサイトではレギュラー（標準）とボールド（太字）フォントで十分ですが、場合によってはイタリック（いわゆる斜体）やセミボールドも購入するといいかもしれません。

ステップ1

フォントを購入すると、フォントファイルへのリンクが記載されたメールを受け取ります。

Proxima Softフォントのダウンロード
Proxima Softフォントのダウンロード

ステップ2

標準や太字などの各フォントバージョンには、WOFF2、WOFF、TTFなどのフォントタイプがあります。今回は例として、WOFFとWOFF2バージョンの標準と太字フォントを使用します。

ローカルフォントのファイル
ローカルフォントのファイル

ステップ3

フォントファイルをFTPでWordPressサイトのfontsフォルダにアップロードします。今回は例として、KeyCDNの無料プラグインCDN Enablerを使用して、すべてのアセットにCDNを使用します。このプラグインはアップロードしたフォントを自動的にCDNにコピーしてくれます。「ローカルでホスティングする」と言っても、CDNはローカルのアセットを参照していることに変わりはなく、重要なのは複数のドメイン（ホスト）ではなく、同じ場所からすべてのアセットを提供することです。

フォントをウェブサーバーにアップロード
フォントをウェブサーバーにアップロード

ステップ4

WordPressサイトのCSSでアップロードしたフォントを参照します。ほとんどのテーマにあるカスタムCSSパネルを使用するか、Simple Custom CSS and JSのような無料プラグインを使用します。以下のコードを挿入して、CDNのURLを参照してください。

@font-face {
 font-family: 'proxima_softregular';
 src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
 url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'proxima_softbold';
 src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
 url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

また、新たなフォントファミリーと紐づけるためにスタイルを更新する必要もあります。以下は、Twenty Seventeenテーマでのコード例です。

body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}

Simple Custom CSS and JSプラグインでは、以下のようになります。

カスタムフォントCSSコード
カスタムフォントCSSコード

ステップ5

WordPressテーマにGoogle Fontsが統合されている場合は、ローカルフォントの二重読み込みを回避するため、無効にする必要があります。この例では、Twenty Seventeenテーマを使用しているため、WordPressのデフォルトテーマのみで機能する無料プラグインのDisable Google Fontsを使用します。それ以外のテーマでは、おそらくテーマの開発元のドキュメントを参照するか、無効化を依頼する必要があります。テーマによっては、バックエンドで自分で無効化できるものもあります。

以上で完了です。Twenty Seventeenテーマの本文とヘッダーにProxima Softフォントが適用されました。

ローカルサイトを追加したWordPressサイト
ローカルサイトを追加したWordPressサイト

HTTPリクエストを確認すると、以下のようにWOFF2フォントへのリクエストは2件のみになっています。サイト上にWOFFフォントもありますが、ChromeがWOFF2をサポートしているため、WOFF2が読み込まれています。（WOFF2をサポートしていない）IE 11でサイトにアクセスすると、WOFFフォントが読み込まれます。

Proxima SoftのHTTPリクエスト
Proxima SoftのHTTPリクエスト

2. Google Fontsをローカルでホスティングする方法

フォントをローカルでホストする2つ目の方法として、Google Fontsで気に入っているフォントをサーバーかCDNに移動することができます。今回は例として、非常に軽量で高速なOpen Sansを使用して手順を見ていきます。

ステップ1

Google Fontsを取得するには、無料ツールのgoogle-webfonts-helperを使用するのがベストです。関連して、Font Face Observerプロジェクトもチェックしてみてください。まずは、任意のGoogle Fontsを検索してスタイルを選択します。先ほど同様、例として標準と太字（700）フォントを使用します。

ウェブフォントOpen Sansをダウンロード
ウェブフォントOpen Sansをダウンロード

ステップ2

続いて、サポートするブラウザを選択します。先に触れたとおり、最新のブラウザでは、WOFFとWOFF2フォントをサポートしています。最大限のサポートを考慮する場合は、WOFF、WOFF2、EOT、TTF、SVGを使用します。以下のように、クリップボードにコピー可能なコードとフォントを含むダウンロードZIPが提供されます。

モダンブラウザのフォント用CSS
モダンブラウザのフォント用CSS

残りの手順は、1つ目の方法と同じになります。

ステップ3

フォントファイルをFTPでWordPressサイトのfontsフォルダにアップロードします。今回は例として、KeyCDNの無料プラグインCDN Enablerを使用して、すべてのアセットにCDNを使用します。このプラグインはアップロードしたフォントを自動的にCDNにコピーしてくれます。「ローカルでホスティングする」と言っても、CDNはローカルのアセットを参照していることに変わりはなく、重要なのは複数のドメイン（ホスト）ではなく、同じ場所からすべてのアセットを提供することです。

Google Fontsをウェブサーバーにアップロード
Google Fontsをウェブサーバーにアップロード

ステップ4

WordPressサイトのCSSでアップロードしたフォントを参照します。ほとんどのテーマにあるカスタムCSSパネルを使用するか、Simple Custom CSS and JSのような無料プラグインを使用します。以下のコードを挿入して、CDNのURLを参照してください。

/* open-sans-regular - latin */
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 400;
 src: local('Open Sans'), local('OpenSans'),
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
 font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'),
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
 url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

また、新たなフォントファミリーと紐づけるためにスタイルを更新する必要もあります。以下は、Twenty Seventeenテーマでのコード例です。

body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}

Simple Custom CSS and JSでは、以下のようになります。

ローカルでホスティングするOpen Sansフォント用のCSS
ローカルでホスティングするOpen Sansフォント用のCSS

ステップ5

WordPressテーマにGoogle Fontsが統合されている場合は、ローカルフォントの二重読み込みを回避するため、無効にする必要があります。この例では、Twenty Seventeenテーマを使用しているため、WordPressのデフォルトテーマのみで機能する無料プラグインのDisable Google Fontsを使用します。それ以外のテーマでは、おそらくテーマの開発元のドキュメントを参照するか、無効化を依頼する必要があります。テーマによっては、バックエンドで自分で無効化できるものもあります。

以上で完了です。Twenty Seventeenテーマの本文とヘッダーにGoogle Open Sansフォントが適用されました。

ローカルでホスティングするOpen Sansフォントが適用されたWordPressサイト
ローカルでホスティングするOpen Sansフォントが適用されたWordPressサイト

HTTPリクエストを確認すると、以下のようにWOFF2フォントへのリクエストは2件のみになっています。サイト上にWOFFフォントもありますが、ChromeがWOFF2をサポートしているため、WOFF2が読み込まれています。（WOFF2をサポートしていない）IE 11でサイトにアクセスすると、WOFFフォントが読み込まれます。

Open SansのHTTPリクエスト
Open SansのHTTPリクエスト

まとめ

購入したフォントをローカルでホスティングしたり、Google FontsをサーバーやCDNに移動したりする方法をご紹介しました。これで、パフォーマンスへの影響を気にすることなく、好きなフォントを使用することができます。フォント選びは、WordPressサイトの印象や見栄えを大きく左右します（WordPressのフォントに関する詳細はこちら）。現在ローカルフォントを使用していない場合は、ぜひ導入を検討してみてください。また、別の選択肢としてシステムフォントを使用する手もあります。

Brian Jackson

Brianの最大の情熱の一つは10年以上使用してきたWordPressです。複数のプレミアムプラグインさえ開発しています。Brianの趣味はブログや映画やハイキングなどです。TwitterでBrianとつながりましょう。