![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
Google Fonts は便利ですが、外部サーバーからフォントを読み込むため、表示速度や外部通信の観点が気になるケースがあります。
そのような場合は、Google Fonts を自サーバーへ配置して配信する「セルフホスト化」がおすすめです。
本記事では、google-webfonts-helper を利用して Google Fonts のフォントファイルをダウンロードし、自サイトで配信する方法を解説します。
Google Fonts を自サーバー配信するメリット
Google Fonts は、以下のように Google のサーバーから読み込んで使用するのが一般的です。
|
1 2 3 |
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet"> |
非常に簡単に導入できますが、外部サーバーへの通信が発生します。
そのため、以下のような理由から、自サーバーへ配置して配信する「セルフホスト化」が採用されるケースもあります。
- 外部リクエストを減らしたい
- 表示速度改善につながる場合がある
- プライバシー・GDPR対策を行いたい
- font-display など、フォント読み込み挙動を細かく制御したい
google-webfonts-helper を使ったセルフホスト化手順
まずは、google-webfonts-helper にアクセスします。
フォントを検索する
左上の検索窓に、使用したい Google Fonts のフォント名を入力します。
候補一覧が表示されるので、目的のフォントをクリックします。
今回は例として、人気の日本語フォント「Noto Sans JP」を使って進めます。
文字セット（charsets）を選択する
「Select charsets」項目より、必要な文字セットを選択します。
この例では以下を選択します。
- japanese
- latin
日本語サイトの場合、japanese のみでも問題ないケースがありますが、
英数字や記号を自然に表示したい場合は latin も選択しておくのがおすすめです。
ウェイト（styles）を選択する
「Select styles」項目より、必要なウェイトを選択します。
この例では以下を選択します。
- regular（400）
- 500（Medium）
- 700（Bold）
使用しないウェイトまで含めるとファイル容量が増えるため、実際に使用する太さだけを選択するのがおすすめです。
CSSコードをコピーする
「Copy CSS」項目に、@font-face のCSSが生成されるのでコピーしておきます。
上部のタブは、通常は「Modern Browsers」を選択すれば問題ありません。
フォントファイルをダウンロードする
「Download files」より zip ファイルをダウンロードします。
zip を解凍すると、.woff や .woff2 のフォントファイルが含まれています。
サーバーへフォントファイルを配置する
解凍したフォントファイルを、自サイトのサーバーへアップロードします。
/assets/fonts//wp-content/themes/テーマ名/fonts/
など、管理しやすいディレクトリへ配置します。
CSSへ @font-face を実装する
コピーしておいた @font-face を、CSSファイルへ貼り付けます。
その際、以下の src パスは、使用しているディレクトリ構成に合わせて修正してください。
src: url('../fonts/noto-sans-jp-v56-japanese_latin-regular.woff2') format('woff2');
例として、CSSファイルと fonts ディレクトリが同階層にある場合は以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* font: noto-sans-jp-regular - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; src: url('./fonts/noto-sans-jp-v56-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* noto-sans-jp-500 - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; src: url('./fonts/noto-sans-jp-v56-japanese_latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* noto-sans-jp-700 - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; src: url('./fonts/noto-sans-jp-v56-japanese_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } body { font-family: "Noto Sans JP", sans-serif; } .title { font-family: "Noto Sans JP", sans-serif; font-weight: 700; } |
@font-face を定義しただけでは適用されないため、font-family で使用する要素を指定します。
HTMLで preload する
HTMLの <head> 内で、最も重要なフォントファイル（通常は400）をpreloadします。
これにより、CSSの読み込み前からフォントのダウンロードを開始できます。
WordPressサイトの例
|
1 |
<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/noto-sans-jp-v56-japanese_latin-regular.woff2" as="font" type="font/woff2" crossorigin> |
preload は必要なフォントだけに限定し、読み込みすぎないよう注意しましょう。
Google Fonts の Download との違い
Google Fonts 公式サイト からもフォントファイルをダウンロードできます。
Google Fonts の Download と、google-webfonts-helper では取得できるファイル形式や用途に違いがあります。
google-webfonts-helper の特徴
google-webfonts-helper では、
.woff
.woff2
など、Web配信向けに最適化された形式を取得できます。
さらに、@font-face のCSSも自動生成されるため、実装が非常に簡単です。
Google Fonts 公式 Download の特徴
Google Fonts 公式 Download では、
.ttf
形式が中心となっています。
.ttf は汎用的なフォント形式ですが、Webフォント用途では .woff2 の方が軽量かつ最適化されています。