目的別・実務で使える font-family スタック集（日本語サイト向け）

Posted on by

使い方の前提

並び順は「第一候補 → 代替 → 最後に汎用族（serif / sans-serif / monospace）」。

日本語フォントは 名称ゆらぎ が多いので、日本語名・英語名・旧名を広く列挙。

Windows と macOS の両対応を基本に、Noto をフォールバックに入れると安心（Android でも安定）。

明朝（本文・縦書き系に強い）

游明朝体 優先（mac / Win 両対応）

:root{
  --mincho: 
    "游明朝体", "游明朝", "Yu Mincho", "YuMincho",
    "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "HGS明朝E", "MS PMincho", "MS 明朝",
    "Noto Serif JP", serif;
}
body.mincho{ font-family: var(--mincho); }

ヒラギノ明朝 優先（Apple 標準寄り）

:root{
  --mincho-hira:
    "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "游明朝体", "游明朝", "Yu Mincho", "YuMincho",
    "MS PMincho", "MS 明朝",
    "Noto Serif JP", serif;
}

ウェブフォントなし前提の軽量系（Noto Serif JP を軸に）

:root{
  --mincho-noto:
    "Noto Serif JP",
    "Yu Mincho", "YuMincho", "游明朝体", "游明朝",
    "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "MS PMincho", "MS 明朝",
    serif;
}

ゴシック（汎用・UI に最適）

游ゴシック 優先（Win10+ / mac）

:root{
  --gothic-yu:
    "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic",
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    "Meiryo", "メイリオ",
    "Noto Sans JP",
    "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

ヒラギノ角ゴ 優先（Apple 標準寄り）

:root{
  --gothic-hira:
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic",
    "Meiryo", "メイリオ",
    "Noto Sans JP",
    Arial, Helvetica, sans-serif;
}

Noto Sans JP をベースにした安定スタック

:root{
  --gothic-noto:
    "Noto Sans JP",
    "Yu Gothic", "YuGothic",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Meiryo", "MS PGothic", "ＭＳ Ｐゴシック",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

角丸・やわらか系（見出し・教育系）

rounded ゴシック寄り

:root{
  --rounded:
    "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro",
    "Yu Gothic", "YuGothic",
    "Meiryo", "Noto Sans JP",
    Arial, sans-serif;
}

見出し・ブランド向け（Display 系）

明朝のコントラストを活かす見出し

:root{
  --display-mincho:
    "Yu Mincho", "YuMincho", "游明朝体", "游明朝",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
}
h1,h2,.display{ font-family: var(--display-mincho); letter-spacing:.02em; }

サンセリフ強調（欧文は幾何学系に逃がす）

:root{
  --display-sans:
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic",
    Inter, "Helvetica Neue", Arial, sans-serif;
}

システム UI スタック（UI・Web アプリ）

  • 各 OS の「標準 UI フォント」を呼ぶ省メモリ＆高速系
:root{
  --system-ui-jp:
    system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic",
    "Helvetica Neue", Arial, sans-serif;
}

等幅（コード・数表）

等幅（日本語混在想定）

:root{
  --mono-jp:
    ui-monospace, SFMono-Regular, Menlo, Monaco, 
    Consolas, "Liberation Mono", 
    "Noto Sans Mono CJK JP", "Noto Sans Mono", 
    "MeiryoKe_Console", 
    "MS Gothic", "ＭＳ ゴシック",
    monospace;
}
code, kbd, pre, samp { font-family: var(--mono-jp); }

可変フォント（Variable Fonts）を使う前提

  • Noto Sans JP VF（可変ウェイト）を想定
:root{
  --noto-vf: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
.vf{
  font-family: var(--noto-vf);
  font-variation-settings: "wght" 450;
}

CJK 混在・多言語サイト（日本語＋英中）

  • 欧文はシステム・和文は Noto にフォールバック
:root{
  --multilang:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial,
    "Noto Sans JP", "Hiragino Sans", "Yu Gothic",
    "Apple Color Emoji", "Segoe UI Emoji",
    sans-serif;
}

旧環境（XP/古い Office 端末等）をなるべく拾う

:root{
  --legacy-safe:
    "Meiryo", "メイリオ",
    "MS PGothic", "ＭＳ Ｐゴシック",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic",
    "Noto Sans JP",
    Arial, Helvetica, sans-serif;
}

文章用の細かな“組版”改善

全体の日本語向け文字詰め

body{
  font-feature-settings: "palt" 1; /* 約物の詰め（プロポーショナルかな）*/
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

数字だけ欧文フォントで綺麗に

.num {
  font-family: "Inter", "Helvetica Neue", Arial, 
               "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-variant-numeric: tabular-nums; /* 桁揃え */
}

11) 実務テンプレ：CSS 変数で一元管理

:root{
  --font-base:     "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Arial, sans-serif;
  --font-heading:  "Yu Mincho", "YuMincho", "游明朝体", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-ui:       system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
}
body{ font-family: var(--font-base); }
h1,h2,h3{ font-family: var(--font-heading); }
code,pre{ font-family: var(--font-mono); }

追加：Google Fonts（Noto 系）の最小実装

低ウェイト数・サブセット（&subset=japanese は不要。自動判定）を推奨。
display=swap を忘れずに。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
body { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Arial, sans-serif; }

よくある質問（実務 Tips）

Q: どの順番がベスト？

A: 「自社デザインに最適な第一候補 → 同系統代替 → OS 標準 → Noto → 汎用族」。Windows 固有の“癖”を抑えるなら Yu / Meiryo を中盤で拾う。

Q: Safari で文字が太く見える？

A: -webkit-text-size-adjust: 100%; を確認。可変フォントなら font-variation-settings を指定。

Q: 速度は？

A: まずはローカルフォント優先。ウェブフォントは後から差し替え（font-display: swap）が原則。

まとめ（最初に迷ったらこれ）

  • 本文： --gothic-noto
  • 見出し： --display-mincho
  • UI/管理画面： --system-ui-jp
  • コード： --mono-jp