font-familyのフォールバック指定｜事故る前に知るべきこと

:::note ※フォールバックで事故りたくない人向けの「回避ガイド」記事です :::

結論（私の判断基準）

必ず総称ファミリー（sans-serif等）を最後に入れる
Mac向け → Windows向け → 総称 の順で指定
Webフォントが読み込めなかったときを想像して 許容範囲か確認する

💡 フォールバック時の見え方を確認したい → Font Preview でフォントを切り替えて確認

私が踏んだ地雷

事故1：Webフォントだけ指定して納品した

/* ❌ Webフォントだけ */
font-family: 'Noto Sans JP';

クライアントの社内ネットワークでGoogle Fontsがブロックされていた。Times New Roman で表示され、「文字化けしてる」と連絡が来た。

Webフォントが読み込めない環境は、思ったより多い。

事故2：Mac向けフォールバックだけ書いた

/* ❌ Macしか考慮していない */
font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;

Windows ユーザーから「フォントがダサい」と言われた。Windowsでは Hiragino Sans が使えないので、sans-serif（MS Pゴシック等）が適用された。

Mac と Windows、両方のフォールバックを書く。

事故3：総称ファミリーを引用符で囲んだ

/* ❌ 機能しない */
font-family: 'Noto Sans JP', 'sans-serif';

デバッグに30分かかった。総称ファミリーは引用符で囲むと「フォント名」として解釈され、機能しない。

安全な指定パターン

ゴシック体（私が最もよく使う）

font-family: 
  'Noto Sans JP',           /* 第一希望（Webフォント） */
  'Hiragino Kaku Gothic ProN', /* Mac向け */
  'Hiragino Sans',          /* 新しいMac向け */
  'Yu Gothic',              /* Windows向け */
  'Meiryo',                 /* 古いWindows向け */
  sans-serif;               /* 最終フォールバック */

明朝体

font-family: 
  'Noto Serif JP',
  'Hiragino Mincho ProN',
  'Yu Mincho',
  'MS Mincho',
  serif;

システムフォント優先（高速表示）

font-family: 
  -apple-system,
  BlinkMacSystemFont,
  'Hiragino Sans',
  'Yu Gothic UI',
  'Meiryo',
  sans-serif;

Webフォントを使わないパターン。表示速度が最優先の場合に。

フォールバックの順番

順番	役割	例
1	第一希望（Webフォント）	Noto Sans JP
2	Mac向けフォールバック	Hiragino Sans
3	Windows向けフォールバック	Meiryo
4	最終フォールバック（総称）	sans-serif

左から順に評価され、使えるフォントが適用される。

引用符のルール

/* スペースを含むフォント名は引用符で囲む */
font-family: 'Noto Sans JP', Meiryo, sans-serif;

/* スペースがなければ引用符は任意 */
font-family: Meiryo, sans-serif;

/* ✅ 総称ファミリーは引用符なし */
font-family: 'Custom Font', sans-serif;

/* ❌ 総称ファミリーを引用符で囲むと機能しない */
font-family: 'Custom Font', 'sans-serif';

確認方法

私が納品前に必ずやること：

DevTools で Webフォントの CSS を無効化
フォールバックフォントで表示されるか確認
見た目が「許容範囲」かチェック

完璧を目指さない。「許容範囲」であればOK。

迷ったときの判断

迷い	私の判断
どのフォールバックを書くか	Mac向け + Windows向け + 総称
フォールバック時の見た目が気になる	「許容範囲」ならOK
Webフォントを使うか迷う	読み込めなかったときを想像して決める

この記事で解決しない場合

Google Fontsの読み込みを最適化したい → Google Fontsの読み込み方法
フォント設計の全体像を知りたい → Webフォント設計の判断基準

フォールバックは保険。完璧を目指さない。「許容範囲」ならそれでいい。