CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － Webフォント読み込み戦略

Web APP CSS
スポンサーリンク

Webフォント読み込み戦略は「速さ・見え方・安定性」を同時に満たすための設計

Webフォントはデザインの質を上げる強力な武器ですが、
読み込みが遅いと 文字が一瞬消える（FOIT）、
または 途中でフォントが切り替わる（FOUT） などの問題が起きます。

だからこそ、
「どう読み込むか」＝読み込み戦略 がとても重要です。

ここでは、初心者でも理解しやすいように
CSS と Tailwind CSS の両方で、実務レベルの戦略を丁寧に解説します。

Webフォント読み込みの基本構造

CSS の基本形

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
}
CSS

Tailwind の基本形

Tailwind 自体はフォント読み込みを担当しないため、
@font-face は CSS に書き、Tailwind 側で fontFamily を設定します。

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: ["Inter", "system-ui", "sans-serif"],
    },
  },
};
JavaScript

例1：最も安全な戦略「font-display: swap」

CSS 版

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
}
CSS

swap の挙動

  • 最初はシステムフォントで表示
  • Webフォントが読み込まれたら即座に切り替え

メリット

  • 文字が消えない（FOIT を防ぐ）
  • 読み込みが遅くてもユーザーが読める

デメリット

  • 読み込み後にフォントが切り替わる（FOUT）

深掘りポイント
swap は「読みやすさ最優先」の戦略で、
Google Fonts でもデフォルトで採用されているほど安全です。

Tailwind 版（CSS は同じ）

/* global.css */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
}
CSS
// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: ["Inter", "system-ui", "sans-serif"],
    },
  },
};
JavaScript

例2：切り替えを目立たせたくない「font-display: optional」

CSS 版

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: optional;
}
CSS

optional の挙動

  • 読み込みが速ければ Webフォントを使う
  • 遅ければシステムフォントのまま（切り替えなし）

メリット

  • FOUT（切り替え）がほぼ起きない
  • パフォーマンスが非常に良い

デメリット

  • 回線が遅いと Webフォントが使われないことがある

深掘りポイント
optional は「UX を最優先」した戦略で、
Google Fonts の推奨戦略としても注目されています。

例3：ブランドフォントを確実に使いたい「font-display: block」

CSS 版

@font-face {
  font-family: "BrandFont";
  src: url("/fonts/BrandFont.woff2") format("woff2");
  font-display: block;
}
CSS

block の挙動

  • 読み込み完了まで文字が非表示（FOIT）
  • 読み込み後に一気に表示

メリット

  • ブランドフォントを確実に使える
  • デザインが崩れない

デメリット

  • 読み込みが遅いと「文字が見えない時間」が発生

深掘りポイント
LP（ランディングページ）やロゴなど、
「絶対にブランドフォントで見せたい」場面で使われます。

例4：Google Fonts の最適な読み込み方法

HTML 版（推奨）

<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=Inter:wght@400;600&display=swap" rel="stylesheet">
HTML

preconnect の役割

  • フォントサーバーへの接続を事前に確立
  • 読み込みが速くなる

display=swap の役割

  • 文字が消えない安全な読み込み

Tailwind 版

Tailwind 側はフォント名を設定するだけです。

module.exports = {
  theme: {
    fontFamily: {
      sans: ["Inter", "system-ui", "sans-serif"],
    },
  },
};
JavaScript

例5：Webフォントの遅延読み込み（パフォーマンス最優先）

HTML 版

<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
HTML

CSS 版

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
}
CSS

preload の効果

  • フォントを最優先で読み込む
  • 初回表示が速くなる

深掘りポイント
preload は強力ですが、
使いすぎると逆にパフォーマンスが落ちるため、
「本当に必要なフォントだけ」に絞るのがコツです。

Webフォント読み込み戦略の設計ポイント（ここが一番大事）

1. まず「何を優先するか」を決める

読みやすさ優先 → swap
切り替えを見せたくない → optional
ブランドフォント最優先 → block
パフォーマンス最優先 → preload + optional

目的によって戦略は変わります。

2. フォールバックフォント（font-family）とセットで考える

Webフォントが読み込まれない場合に備えて、
フォントスタックを必ず設計します。

例（日本語サイト）

font-family:
  "Inter",
  "Noto Sans JP",
  "Hiragino Sans",
  "Yu Gothic",
  "Meiryo",
  sans-serif;
CSS

3. 太さ（font-weight）ごとにフォントを読み込む

Webフォントは太さごとにファイルが別なので、
必要な太さだけ読み込むのが鉄則です。

例：400 と 700 だけ

@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-display: swap;
}
CSS

4. Tailwind では「fontFamily の設定」と「@font-face の管理」を分離する

Tailwind はフォント読み込みを担当しないため、

  • 読み込み：CSS（@font-face）
  • 使用：Tailwind（fontFamily）

という役割分担が最適です。

実務テンプレート：最もバランスの良い Webフォント戦略

global.css

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
CSS

tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Inter",
        "system-ui",
        "-apple-system",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "Noto Sans JP",
        "sans-serif",
      ],
    },
  },
};
JavaScript

まとめ

Webフォント読み込み戦略は、
「速さ」「見え方」「安定性」 のバランスを取るための設計です。

ポイントは次の通りです。

  • font-display の選択が UX を大きく左右する
  • swap は最も安全、optional は最も自然、block はブランド向け
  • preload は強力だが使いすぎ注意
  • Tailwind は fontFamily の設定だけでよい
  • 日本語サイトではフォールバックフォントが特に重要

スポンサーリンク
タイトルとURLをコピーしました