😎

フォントフォールバック解説

2025/07/09に公開

font

Google Fonts

tech

Webサイトのフォントが必ず表示される仕組み - フォントフォールバック完全解説

概要

Webサイトを見ていて「なぜか文字が変なフォントで表示されている」「読み込みが遅いのに文字だけは表示されている」という経験はありませんか？

実は、これはフォントフォールバックという仕組みが働いているからなんです！

この記事では、CSSでフォントを指定する際の「なぜ複数のフォントを書くのか？」という疑問を、図解とコード例で分かりやすく解説します。

🔰 基本から理解しよう

そもそもフォントフォールバックって何？

フォントフォールバックとは、指定したフォントが使用できない場合に、代替フォントを順次試していく仕組みです。

[!NOTE]
「フォールバック（fallback）」= 「代替手段」「バックアップ」という意味

身近な例で理解する

図書館で本を借りる場合を想像してみましょう

フォントも同じ仕組みです！

/* 欲しい本のリスト（フォントリスト）*/
font-family: 'M PLUS Rounded 1c', 'Kosugi Maru', 'Noto Sans JP', sans-serif;

フォントが使えない理由

1. インターネット接続が遅い・不安定

Googleフォントが読み込めない
CDNサーバーに接続できない

2. 古いブラウザ・デバイス

新しいフォント形式に対応していない
特定のフォントをサポートしていない

3. システムにフォントがインストールされていない

Windows/Mac/Linuxでフォントが異なる
特定の言語フォントがない

[!WARNING]
フォントを1つだけ指定すると、そのフォントが読み込めない場合にブラウザのデフォルトフォント（通常はTimes New Roman）が使用されてしまいます

🎯 実践例

基本的なフォントフォールバック

/* 基本的な例 */
.text {
    font-family: 'Arial', 'Helvetica', sans-serif;
}

動作の流れ

日本語サイトでの実践例

AWS中学校サイトの実際の設定

:root {
    --font-sans:
        'M PLUS Rounded 1c', /* 1位：理想のフォント */ 'Kosugi Maru', /* 2位：似た特徴のフォント */ 'Sawarabi Gothic',
        /* 3位：代替フォント */ 'Zen Kaku Gothic New', /* 4位：さらなる代替 */ 'Zen Maru Gothic', /* 5位：手書き風維持 */ 'Noto Sans JP',
        /* 6位：安定の日本語フォント */ 'BIZ UDPゴシック', /* 7位：システムフォント */ '游ゴシック', /* 8位：Windows/Mac標準 */ 'Yu Gothic',
        /* 9位：Windows標準 */ 'メイリオ', /* 10位：古いWindows */ 'Meiryo', /* 11位：英語名 */ ui-sans-serif, /* 12位：ブラウザ標準 */ system-ui,
        /* 13位：OS標準 */ sans-serif; /* 14位：最後の砦 */
}

各フォントの役割

順位	フォント	役割	対応環境
1-5	Googleフォント	理想的なデザイン	ネット接続良好
6-7	日本語システムフォント	確実な日本語表示	全環境
8-11	Windows/Mac標準	OS標準サポート	主要OS
12-14	ブラウザ・システム標準	最後の砦	全環境

📚 応用編

用途別フォントフォールバック戦略

1. 見出し用（インパクト重視）

.heading {
    font-family:
        'Noto Sans JP',
        /* 太字が美しい */ 'Hiragino Kaku Gothic Pro',
        /* Mac標準 */ 'Yu Gothic',
        /* Windows標準 */ 'Meiryo',
        /* 古いWindows */ sans-serif;
}

2. 本文用（可読性重視）

.body-text {
    font-family:
        'BIZ UDPゴシック',
        /* ユニバーサルデザイン */ 'Noto Sans JP',
        /* 安定性 */ '游ゴシック',
        /* システム標準 */ 'Meiryo',
        /* フォールバック */ sans-serif;
}

3. コード用（等幅フォント）

.code {
    font-family:
        'JetBrains Mono',
        /* プログラマー向け */ 'Fira Code',
        /* リガチャ対応 */ 'Consolas',
        /* Windows標準 */ 'Monaco',
        /* Mac標準 */ monospace; /* 等幅フォント */
}

パフォーマンスを考慮した設定

font-display: swap を活用

@font-face {
    font-family: 'M PLUS Rounded 1c';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* フォールバックを即座に表示 */
}

preconnect でフォント読み込み最適化

<!-- DNS解決を事前に行う -->
<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=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet" />

実際の動作検証

開発者ツールで確認する方法

Chrome DevTools を開く
Network タブ → フォントファイルの読み込み状況を確認
Elements タブ → Computed で実際に使用されているフォントを確認
ネットワーク制限 → 遅い回線をシミュレート

// JavaScript でフォント読み込み状況を確認
document.fonts.ready.then(() => {
    console.log('すべてのフォントが読み込まれました');
});

// 特定のフォントの読み込み状況
const font = new FontFace('M PLUS Rounded 1c', 'url(font.woff2)');
font.load()
    .then(() => {
        console.log('M PLUS Rounded 1c が読み込まれました');
    })
    .catch(() => {
        console.log('フォントの読み込みに失敗しました');
    });

🛠️ 実装時のベストプラクティス

1. フォントスタックの構成原則

[!TIP] > 理想 → 代替 → システム → 汎用 の順番で配置する

/* 良い例 */
.good-example {
    font-family:
        '理想のフォント',
        /* Webフォント */ '代替フォント',
        /* 似た特徴のフォント */ 'システムフォント',
        /* OS標準 */ generic-family; /* serif, sans-serif, monospace */
}

/* 悪い例 */
.bad-example {
    font-family: 'M PLUS Rounded 1c'; /* フォールバックなし */
}

2. 日本語フォントの注意点

文字化けを防ぐための順序

/* 日本語優先 */
.japanese-first {
    font-family:
        'Noto Sans JP',
        /* 日本語Webフォント */ 'Hiragino Sans',
        /* Mac日本語システム */ 'Yu Gothic',
        /* Windows日本語システム */ 'Meiryo',
        /* 古いWindows */ sans-serif;
}

/* 英語フォント混在の場合 */
.mixed-language {
    font-family:
        'Inter',
        /* 英語Webフォント */ 'Noto Sans JP',
        /* 日本語Webフォント */ system-ui,
        /* システム標準 */ sans-serif;
}

3. フォントサイズとline-heightの調整

/* フォントごとの特性を考慮 */
.responsive-typography {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.7; /* 日本語に適した行間 */
    letter-spacing: 0.05em; /* 少し文字間を空ける */
}

4. 多言語対応

/* 言語別フォント指定 */
:root {
    --font-japanese: 'Noto Sans JP', 'Yu Gothic', sans-serif;
    --font-english: 'Inter', 'Helvetica', sans-serif;
    --font-korean: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 言語属性による切り替え */
:lang(ja) {
    font-family: var(--font-japanese);
}

:lang(en) {
    font-family: var(--font-english);
}

:lang(ko) {
    font-family: var(--font-korean);
}

⚠️ よくある失敗例と対処法

1. フォントの読み込み順序ミス

/* 悪い例：システムフォントを最初に置く */
.bad-order {
    font-family: 'Arial', 'M PLUS Rounded 1c', sans-serif;
    /* → Arialが使えるとM PLUS Rounded 1cが使われない */
}

/* 良い例：理想のフォントを最初に */
.good-order {
    font-family: 'M PLUS Rounded 1c', 'Arial', sans-serif;
}

2. generic-familyの省略

/* 悪い例：generic-familyがない */
.no-generic {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP';
    /* → すべてのフォントが使えない場合、ブラウザ標準のserifが使用される */
}

/* 良い例：必ずgeneric-familyを最後に */
.with-generic {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

3. フォント名の間違い

/* 悪い例：フォント名が間違っている */
.typo-font {
    font-family: 'M Plus Rounded 1c', sans-serif; /* 正しくは'M PLUS Rounded 1c' */
}

/* 良い例：正確なフォント名 */
.correct-font {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

[!WARNING]
フォント名は大文字小文字、スペース、記号まで正確に記述する必要があります

🎯 実際のサイト運用での考慮事項

1. 読み込み速度の最適化

/* フォントの優先度を考慮 */
.optimized-fonts {
    font-family:
        'M PLUS Rounded 1c',
        /* 理想のフォント */ 'Hiragino Sans',
        /* システムフォント（高速）*/ ui-sans-serif,
        /* ブラウザ標準（超高速）*/ sans-serif; /* 最後の砦 */
}

2. アクセシビリティの配慮

/* 読みやすさを重視 */
.accessible-fonts {
    font-family:
        'BIZ UDPゴシック',
        /* ユニバーサルデザイン */ 'Noto Sans JP',
        /* 高い視認性 */ 'Yu Gothic',
        /* システム標準 */ sans-serif;
}

/* ディスレクシア対応 */
.dyslexia-friendly {
    font-family:
        'OpenDyslexic',
        /* ディスレクシア専用 */ 'Noto Sans JP',
        /* 標準的な読みやすさ */ sans-serif;
}

3. モバイル対応

/* モバイルでの表示を考慮 */
.mobile-optimized {
    font-family:
        'M PLUS Rounded 1c',
        /* 理想のフォント */ 'Hiragino Sans',
        /* iOS標準 */ 'Noto Sans JP',
        /* Android標準 */ sans-serif;
}

/* 小さい画面での可読性 */
@media (max-width: 768px) {
    .mobile-text {
        font-family:
            'BIZ UDPゴシック',
            /* 小さくても読みやすい */ 'Noto Sans JP',
            sans-serif;
        font-size: 16px; /* 最小サイズ */
        line-height: 1.8; /* 行間を広く */
    }
}

まとめ

フォントフォールバックが重要な理由

確実な表示: どんな環境でも文字が読める
パフォーマンス: フォント読み込み失敗時も即座に表示
ユーザビリティ: 一貫した読みやすさを提供
アクセシビリティ: より多くの人が利用可能

設定時のチェックポイント

✅ 理想のフォントを最初に配置
✅ 似た特徴のフォントを代替に配置
✅ システムフォントを中間に配置
✅ generic-familyを最後に配置
✅ フォント名を正確に記述

最後に

フォントフォールバックは、見た目だけでなくユーザー体験を大きく左右する重要な仕組みです。

「なぜ複数のフォントを書くのか？」の答えは、すべてのユーザーに確実に読みやすい文字を提供するためなんです。

[!TIP]
実際のサイトでは、開発者ツールで各環境でのフォント表示を確認し、ユーザーテストを行うことが大切です

この記事が、より良いWeb体験を提供するお手伝いになれば嬉しいです！✨

参考資料