Webサイトにおけるフォントの全て｜基礎・仕組み・実務判断まで完全解説

はじめに

Webサイト制作において、フォントは単なるデザイン要素ではありません。
フォントの選び方や読み込み方は、

• 読みやすさ
• 表示速度
• レイアウトの安定性
• ユーザー体験（UX）

に直接影響します。

本記事では、
フォントの基礎 → 仕組み → 実務での判断基準
を一つの記事にまとめ、「なぜそう設計するのか」まで解説します。

Webで扱うフォントの全体像

Webで使われるフォントは、大きく次の2種類に分けられます。

• デバイスフォント
• Webフォント

この違いを理解せずに実装すると、
環境差による見た目の違いやパフォーマンス問題が起きやすくなります。

デバイスフォントとは

デバイスフォントとは、ユーザーの端末に最初からインストールされているフォントです。

代表的な例

• Windows：メイリオ、游ゴシック
• macOS：ヒラギノ角ゴ、San Francisco

CSSでの指定例

body {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

CSSでは、左から順に使用可能なフォントが選択されます。

デバイスフォントの特徴

• フォントの読み込みが不要で表示が速い
• OSや環境によって見え方が異なる
• 本文用途では差が問題になることは少ない

Webフォントとは

Webフォントとは、Web上からフォントファイルを読み込んで表示するフォントです。

ユーザーの端末にフォントがインストールされていなくても、
ブラウザがフォントデータをダウンロードして表示します。

注意点

「同じフォントが表示される」とは、
同じフォントファミリーが使われるという意味であり、
描画結果が完全に一致するわけではありません。

アンチエイリアスとは（見え方が違う理由）

アンチエイリアスとは、文字の輪郭のギザギザを滑らかに見せる描画処理です。
これはフォントデータそのものではなく、OSやブラウザ側の描画処理によって行われます。

同じフォントでも見え方が違う理由

• OS（Windows / macOS）
• ブラウザ（Chrome / Safari など）

によって、文字の太さやにじみ方が微妙に変わります。

実務上のポイント

• Webフォントを使っても完全一致はしない
• 細すぎるウェイトは環境差が目立ちやすい
• 複数環境での確認が望ましい

フォント設計は「多少の差が出る前提」で行うことが重要です。

デバイスフォントとWebフォントの違い

font-familyの優先順位と設計意図

font-familyは、単なる保険ではありません。

font-family:
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;

font-family:
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;

設計の考え方

• OSごとに最適な日本語フォントが異なる
• 見た目が近いフォントを並べることでズレを最小化
• 最後にgeneric familyを指定して破綻を防ぐ

フォールバックフォントの重要性

フォールバックを考慮しないと、

• 文字幅の変化
• 行間の変化
• レイアウトのズレ

が起こります。

フォント指定は「使われなかった場合」まで含めて設計する
これが実務では重要です。

@font-faceとは

@font-faceは、CSSでフォントファイルを直接読み込むための仕組みです。

@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "MyFont";
  src: url("fonts/myfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

これにより、
ユーザー端末に依存しないフォント表示が可能になります。

@font-faceを使う場面

• CDNや外部フォントサービスを使わない
• CDNに存在しないフォントを使いたい
• 商用・オリジナルフォントを配布制御したい
• フォントの挙動を細かく制御したい

CDN（Google Fontsなど）との比較

CDNの特徴

• 配信が高速
• 設定が簡単
• 初心者でも扱いやすい

※以前ほどのクロスサイトキャッシュ効果は期待できない

自前@font-faceの特徴

• 外部通信を避けられる
• 挙動を完全に制御できる
• 適切に最適化すればCDNと同等以上も可能

方法の優劣ではなく、前提条件で選択するのが重要です。

フォントファイル形式

• woff2（推奨）
• woff
• ttf / otf（対応はしているがWeb用途では非効率）

woff2は圧縮率が高く、Web用途に最適です。

font-displayとUX

font-displayは、フォント読み込み中の表示挙動を制御します。

• block：文字が非表示になる
• swap：即表示 → 後から差し替え
• optional：環境次第で読み込まない

実務ではswapが最もバランスが良い選択です。

日本語Webフォントが重い理由

• 日本語は文字数（グリフ）が非常に多い
• 英字フォントの数倍〜数十倍の容量になる

そのため、

• 本文はデバイスフォント
• 日本語Webフォントは装飾用途に限定

が合理的な設計です。

可変フォント（Variable Fonts）とは

可変フォントとは、1つのフォントファイルで太さや幅などを連続的に変えられるフォント形式です。

従来との違い

従来はウェイトごとに別ファイルが必要でしたが、
可変フォントでは1ファイルで管理できます。

指定例

font-weight: 350;

font-weight: 350;

メリット

• フォントファイル数を削減できる
• 微妙な太さ調整が可能
• 表現の自由度が高い

注意点

• 日本語対応フォントが少ない
• ファイルサイズが必ずしも小さくならない
• 実務導入には慎重な判断が必要

現時点では「条件が合えば使う選択肢」という位置づけです。

フォントはパフォーマンス要素

フォントは以下に影響します。

• 初期表示速度
• CLS（レイアウトシフト）
• Lighthouseスコア

フォントは「装飾」ではなくパフォーマンス設計の一部です。

実務で迷わないフォント設計指針

• 本文：デバイスフォント
• 見出し：必要最小限のWebフォント
• woff2を使用
• font-display: swap
• フォールバックを必ず設計

まとめ

• フォントにはデバイスフォントとWebフォントがある
• Webフォントでも見え方は完全一致しない
• アンチエイリアスやOS差を前提に設計する
• 可変フォントは状況次第で選択
• 重要なのは「方法」より「設計意図」

この考え方を押さえておけば、
フォント設計で大きく迷うことはなくなります。