Webサイトの表示速度はUXやSEOに直結します。
しかし、Google Fonts（特に日本語フォント）を公式のタグで読み込むと、一瞬標準フォントが表示されてガタつく「FOUT（Flash of Unstyled Text）」が発生しがちです。
本記事では、Google Fontsを自前サーバーに設定し、表示を高速化・安定化させる手順を解説します。
なぜ公式タグだと遅いのか？
- 外部リクエストの発生:
fonts.googleapis.comとfonts.gstatic.comという2つの外部ドメインに接続するため、どうしても読み込みに時間がかかります。 - レンダリングブロック: 非同期で読み込むと、フォントが読み込まれる前に、タグなどの要素の読み込みが始まってしまいます。そのせいで後からフォントが切り替わる「ちらつき」が起きます。
- ファイルサイズ: 日本語フォントはフルセットだと数MBに及ぶことがあり、ダウンロード完了まで時間がかかります。
解決策：Google Fontsを自前のサーバに設定する手順
1. 必要なフォントファイルをダウンロードする
google-webfonts-helper を使用するのが最も効率的です。
a. フォントを選択（例：Noto Sans JP）
b. 必要なウェイト（太さ）を厳選
regular（400）と、bold（700）など。
使うフォントだけ選択します。
全て選ぶと重くなるので注意です。
日本語フォントの時、「1. Select chartsets」の「japanese」と「latin」の両方にチェックを入れてください。
そうしないと、フォントがうまく表示されないです。
ちなみに、他のSelect chartsetsは、以下の言語を扱うときにチェックを入れましょう。
- cyrillic (キリル文字):：ロシア語やブルガリア語などで使われる文字（例：Д, П, Ф）
- latin-ext (Latin Extended)：ベトナム語、ポーランド語、トルコ語などの特殊な記号付きのアルファベットが含まれる文字
c. フォントをダウンロード
ダウンロードボタンを押して、フォントをダウンロードします。
zipファイルに、Modern Browsers (woff2)が入っています。
（3. Copy CSSは後ほど使います。）
2. CSSの定義（@font-face）
ダウンロードしたファイルをプロジェクトの fonts/ フォルダ等に配置し、CSSで定義します。
今回はWordPressのテーマに組み込みます。
私の場合、テーマフォルダの直下にfonts/ フォルダを作成しました。css/フォルダとは別にしています。
CSSにgoogle-webfonts-helperの「3.Copy CSS」のコードを入れていきます。
基本、このコードのコピペでOKですが、
ご自分のcss/フォルダとfonts/ フォルダの置き場所に合わせて、
「Customize folder prefix (optional): 」のパスを修正してください。
私の場合、
SCSSで管理しているため、scss/Foundation/_font.scssのように別ファイルにして管理しています。
リセットCSSを設定している場合、この後に読み込ませるのがいいと思います。
3. HTMLでのPreload設定
自前サーバーから読み込む場合でも、link rel="preload" を使うことで、ブラウザがCSSを解析する前にフォントのダウンロードを開始でき、さらに高速化します。
<link rel="preconnect" href="https://fonts.googleapis.com">など、Google Fontsを読み込むための通常のコードは不要なので、削除します。
そして、以下のようにコードを追加します。
WordPressのテーマ内に設定する想定です。
<link rel="preload" href="<?php echo esc_url(get_template_directory_uri()); ?>/fonts/noto-sans-jp-v55-japanese_latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo esc_url(get_template_directory_uri()); ?>/fonts/noto-sans-jp-v55-japanese_latin-regular.woff2" as="font" type="font/woff2" crossorigin>これで、フォントがちゃんと読み込まれていたら完了です！
まとめ
Google Fontsの「ちらつき」対策には、自前サーバー配信が非常に有効です。
- 外部ドメインへのリクエストを減らす
- WOFF2形式で軽量に配信する
- Preloadでダウンロード順位を上げる これらを組み合わせることで、ストレスのないスムーズなフォント表示が可能になります
