CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － font-display制御

Web APP CSS
スポンサーリンク

font-display は「Webフォントが読み込まれるまでの見え方」をコントロールする仕組み

Webフォントは便利ですが、読み込みが遅いと
文字が消える（FOIT） や 途中でフォントが切り替わる（FOUT） といった問題が起きます。

font-display は、この「読み込み中の見え方」を制御するためのプロパティです。
どの値を選ぶかで、ユーザー体験が大きく変わります。

ここでは、CSS と Tailwind CSS の両方で、
初心者でも理解しやすいように丁寧に解説していきます。

font-display の基本値と挙動

まずは全体像をイメージ

font-display には主に次の値があります。

  • swap：すぐ代替フォントで表示 → 読み込み後に切り替え
  • optional：速ければ使う、遅ければ使わない
  • fallback：短時間だけ待って、ダメなら代替フォント
  • block：読み込み完了まで文字を非表示
  • auto：ブラウザ任せ（推奨されない）

この中で、実務でよく使うのは swap / optional / block の3つです。

例1：最も安全で実務向き「font-display: swap」

CSS 版

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

挙動の説明（初心者向けにかみ砕く）

  • 最初は システムフォント で表示
  • Webフォントが読み込まれたら 即座に切り替わる
  • 文字が消える時間がないので読みやすい

メリット

  • FOIT（文字が消える現象）を完全に防げる
  • Google Fonts もデフォルトで swap を採用
  • ほぼすべてのサイトで安全に使える

デメリット

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

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

挙動の説明

  • 読み込みが速ければ Webフォントを使う
  • 遅ければ システムフォントのまま固定
  • 切り替えが発生しないので自然な見え方

メリット

  • FOUT（切り替え）がほぼゼロ
  • UX が非常に自然
  • パフォーマンスが良い

デメリット

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

深掘りポイント
optional は「読み込みが遅いなら無理に使わない」という考え方で、
ユーザー体験を最優先にした戦略です。

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

CSS 版

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

挙動の説明

  • 読み込み完了まで 文字が非表示（FOIT）
  • 読み込み後に一気に表示される
  • ブランドフォントを確実に使いたいときに有効

メリット

  • デザインが崩れない
  • ブランドフォントを100%適用できる

デメリット

  • 回線が遅いと「文字が見えない時間」が長くなる
  • UX 的にはややリスクがある

例4：Google Fonts での font-display 制御

Google Fonts は URL パラメータで font-display を指定できます。

HTML 版（swap の例）

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
  rel="stylesheet"
/>
HTML

optional にしたい場合

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=optional"
  rel="stylesheet"
/>
HTML

例5：font-display と preload を組み合わせる（上級者向け）

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 は「最優先で読み込む」ため、
swap と組み合わせると初回表示が速くなります。

ただし、preload の使いすぎは逆にパフォーマンスを落とすため、
本当に必要なフォントだけに絞るのがコツです。

font-display の選び方（ここが一番大事）

目的別の最適解

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

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

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

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

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

実務テンプレート：最もバランスの良い font-display 設計

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

まとめ

font-display は、Webフォントの読み込み中の見え方を制御するための重要なプロパティです。

  • swap → 最も安全で実務向き
  • optional → UX が自然でパフォーマンス最強
  • block → ブランドフォントを確実に使いたいとき
  • preload と組み合わせるとさらに高速化

Tailwind では fontFamily の設定と組み合わせて使うことで、
どの環境でも安定したタイポグラフィを実現できます。

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