Webフォントの基礎｜読み込み最適化とフォールバック設定

タイポグラフィは、Webデザインの根幹です。

どれだけ美しいレイアウトを組んでも、どれだけ凝ったアニメーションを実装しても、テキストが読みにくければ意味がありません。そしてテキストの読みやすさ——さらにはデザインの印象——を大きく左右するのが、フォントの選択です。

かつてWebデザイナーは、フォント選びにおいて深刻な制約を抱えていました。ユーザーのPCにインストールされているフォントしか使えない。Windowsならメイリオ、Macならヒラギノ——環境依存のデザインしかできなかったのです。

その制約を打ち破ったのが、Webフォントです。

Webフォントとは何か

Webフォントとは、サーバーからダウンロードして表示するフォントのこと。ユーザーのデバイスにインストールされていなくても、指定したフォントで表示できます。

提供方法

Webフォントを利用する方法は、主に3つあります。

方法	代表例	特徴
ホスティングサービス	Google Fonts	無料、CDN配信、手軽
サブスクサービス	Adobe Fonts	高品質フォント豊富、有料
自前ホスティング	-	完全コントロール、管理コスト

個人サイトや中小規模のプロジェクトなら、Google Fontsで十分です。日本語フォントも充実しており、Noto Sans JP、Noto Serif JPなど、実用的な選択肢が揃っています。

Webフォントの代償——パフォーマンス問題

便利なWebフォントですが、タダではありません。パフォーマンスという代償を伴います。

ファイルサイズ

欧文フォントは軽量です。アルファベット26文字 × 大小 + 記号程度で済むため、数十KB程度。

しかし日本語フォントは数千から数万の文字を収録しなければなりません。結果、1フォントあたり数MB——場合によっては10MB以上になることも。

読み込み遅延

フォントファイルが大きいと、ダウンロードに時間がかかります。その間、テキストはどうなるのか？

ブラウザによって挙動が異なりますが、大きく2つのパターンがあります。

FOIT（Flash of Invisible Text） フォントが読み込まれるまで、テキストが表示されない。「白い画面」問題の原因。

FOUT（Flash of Unstyled Text） システムフォントで一旦表示し、Webフォントが読み込まれたら切り替わる。テキストがチラつく。

どちらもユーザー体験を損ねます。だからこそ、パフォーマンスを意識した実装が必要なのです。

font-family——フォントスタックの設計

CSSでフォントを指定するとき、font-familyプロパティを使います。

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

この書き方には意味があります。

左から順に優先度が高く、ブラウザは左から順にフォントを探します。見つからなければ次のフォントへ——これがフォールバックです。

設計のポイント

最優先: 使いたいWebフォント
OS別のシステムフォント: macOS → Windows の順
総称ファミリー: 最終手段として sans-serif や serif

日本語サイト向けの定番設定：

body {
  font-family:
    "Noto Sans JP",           /* Webフォント */
    "Hiragino Kaku Gothic ProN",  /* macOS */
    "Hiragino Sans",          /* macOS（新しめ） */
    "Meiryo",                 /* Windows */
    "Yu Gothic",              /* Windows 10以降 */
    sans-serif;               /* 最終フォールバック */
}

このスタックなら、Webフォントが読み込まれなくても、OSに応じた適切なフォントで表示されます。

Google Fontsの効率的な使い方

Google Fontsを使うとき、何も考えずにコピペすると痛い目を見ます。

悪い例——すべてのウェイトを読み込む

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

このURLは、Noto Sans JPのすべてのウェイト（100〜900）を読み込みます。日本語フォントでこれをやると、数MBのダウンロードが発生します。

良い例——必要なウェイトだけ

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

wght@400;700 と明示することで、Regular（400）とBold（700）だけを読み込みます。実際のサイトで使うウェイトは2〜3種類が普通ですから、これで十分です。

display=swapの意味

display=swap は必須です。

これを指定すると、Webフォントが読み込まれるまでシステムフォントで表示し、読み込み完了後に切り替えます（FOUT方式）。

テキストが見えない状態（FOIT）よりは、一瞬チラついても読める方がマシ——というUX判断です。

preconnectで高速化

Google Fontsを使うなら、preconnectも一緒に設定しましょう。

<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;700&display=swap" rel="stylesheet">

preconnect は、ブラウザに「このドメインにすぐ接続するから準備しておいて」と伝えるヒント。DNS解決やTLSハンドシェイクを事前に済ませることで、実際のリクエストを高速化します。

フォールバックの設計——CLSを防ぐ

フォントの切り替わりには、もう一つ厄介な問題があります。CLS（Cumulative Layout Shift）——レイアウトのズレです。

何が起きるのか

システムフォント → Webフォントへの切り替え時、文字の幅や高さが変わることがあります。

その結果、テキストの下にある要素が上下に動く。ユーザーから見ると「読もうとした文章がズレた」という不快な体験になります。

size-adjustで対策

CSS Font Loading Module Level 4には、size-adjust というプロパティがあります。

@font-face {
  font-family: "Fallback";
  src: local("Hiragino Kaku Gothic ProN");
  size-adjust: 95%;  /* Webフォントとサイズを合わせる */
}

body {
  font-family: "Noto Sans JP", "Fallback", sans-serif;
}

フォールバックフォントのサイズを調整することで、切り替え時のズレを最小化できます。

ただし、完璧な一致は難しいのが実情。字形が違えば、どうしても微妙な差は残ります。CLSを完全にゼロにするのは困難ですが、目立たなくすることは可能です。

Core Web Vitalsへの影響

Webフォントは、Googleの検索ランキングにも影響します。

2021年以降、GoogleはCore Web Vitalsをランキング要因に含めています。Webフォントは、以下の指標に影響を与えます。

LCP（Largest Contentful Paint）

ページの「主要コンテンツ」が表示されるまでの時間。

多くのページで、主要コンテンツはテキスト（見出し、本文）です。Webフォントの読み込みが遅れると、テキストの表示も遅れ、LCPが悪化します。

CLS（Cumulative Layout Shift）

前述の通り、フォント切り替えによるレイアウトシフトはCLSを悪化させます。

対策

必要最小限のウェイトだけ読み込む
display=swapを必ず指定
preconnect/preloadで早期読み込み
size-adjustでフォールバック調整
本当に必要か再考する——システムフォントで済むなら、Webフォントは使わない

日本語フォントの特殊事情

日本語フォントには、特有の課題があります。

ファイルサイズ

先述の通り、日本語フォントは大きい。Noto Sans JPの場合、全ウェイト・全文字を収録すると20MB以上になります。

Google Fontsの工夫

Google Fontsは、日本語フォントをサブセット化して配信しています。

ユーザーが使用する文字だけを含むサブセットを動的に生成し、ダウンロードサイズを削減。一般的なWebページなら、数百KB程度で済みます。

自前ホスティングなら

Google Fontsを使わず自前でホスティングする場合、以下の対策が有効です。

サブセット化: 使用する文字だけ抽出
WOFF2形式: 最も圧縮率が高いフォーマット
unicode-range: CSSでどの文字範囲にフォントを適用するか指定

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  unicode-range: U+3000-9FFF;  /* CJK文字のみ */
  font-display: swap;
}

実装のベストプラクティス

ここまでの内容をまとめると、Webフォント実装のベストプラクティスは以下の通りです。

1. 本当に必要か検討

Webフォントを使う前に、システムフォントで代用できないか考えましょう。

最近のOS標準フォント（San Francisco、Segoe UI、Noto Sans）は品質が高く、多くのケースで十分です。「ブランド表現上、どうしても特定のフォントが必要」という場合にのみ、Webフォントを選択する。

2. ウェイトを厳選

使うウェイトだけを読み込む。多くのサイトでは、Regular（400）とBold（700）の2種類で十分。

3. display: swapを指定

FOITを防ぎ、テキストを早期に表示。

4. preconnectを設定

Google Fontsなど外部サービスを使う場合は必須。

5. フォントスタックを設計

適切なフォールバックを用意し、Webフォントが読み込めなくても崩れないように。

6. パフォーマンスを測定

Lighthouse、PageSpeed Insightsでフォント関連の警告をチェック。

フォント	特徴	用途
Noto Sans JP	クセがなく万能、Google Fonts無料	本文、UI
M PLUS 1p	モダンで親しみやすい	見出し、本文
BIZ UDPGothic	UDフォント、可読性高い	アクセシビリティ重視

フォント	特徴	用途
Noto Serif JP	美しい明朝、Google Fonts無料	見出し、ブランド表現
Shippori Mincho	伝統的な印象	和風デザイン

まとめ——パフォーマンスとデザインの両立

Webフォントは、デザインの表現力を大きく広げてくれます。しかし同時に、パフォーマンスへの影響を常に意識しなければなりません。

この両立は、決して難しいことではありません。

必要なウェイトだけ読み込む
display=swapを指定する
preconnectで高速化する
適切なフォールバックを設計する

これらのベストプラクティスを守れば、美しいタイポグラフィと快適なパフォーマンスを両立できます。

ポイント:

✅ Webフォントはパフォーマンスコストを伴う
✅ 必要なウェイトだけ読み込む
✅ display=swapでFOITを防ぐ
✅ preconnectで接続を高速化
✅ 適切なフォールバックを設計
✅ 日本語フォントはサブセット化を検討
✅ Core Web Vitalsへの影響を測定

フォントは、サイトの「声」です。適切なフォント選びと、適切な実装で、その「声」をユーザーに届けてください。

Webフォントの基礎｜読み込み最適化とフォールバック設定

Webフォントとは何か

提供方法

Webフォントの代償——パフォーマンス問題

ファイルサイズ

読み込み遅延

font-family——フォントスタックの設計

設計のポイント

Google Fontsの効率的な使い方

悪い例——すべてのウェイトを読み込む

良い例——必要なウェイトだけ

display=swapの意味

preconnectで高速化

フォールバックの設計——CLSを防ぐ

何が起きるのか

size-adjustで対策

Core Web Vitalsへの影響

LCP（Largest Contentful Paint）

CLS（Cumulative Layout Shift）

対策

日本語フォントの特殊事情

ファイルサイズ

Google Fontsの工夫

自前ホスティングなら

実装のベストプラクティス

1. 本当に必要か検討

2. ウェイトを厳選

3. display: swapを指定

4. preconnectを設定

5. フォントスタックを設計

6. パフォーマンスを測定

おすすめの日本語Webフォント

ゴシック体

明朝体

選び方のポイント

まとめ——パフォーマンスとデザインの両立

あわせて読みたい

関連記事