Webフォントとは何ですか？

Webサーバーからフォントデータを配信し、ブラウザで表示するフォントの利用方式。端末にインストールされていないフォントも使える。

Webフォントのポイントは？

Google Fontsが最も利用されている無料Webフォントサービス。@font-faceでCSSからフォントを読み込み。WOFF2形式が最も軽量で全ブラウザ対応。日本語フォントはファイルサイズが大きいのでサブセット化が重要

【うぇぶふぉんと】

Webフォントとは？

💡 「どの端末でも同じフォント」をWebから配信

📌 このページのポイント

Google Fontsが最も利用されている無料Webフォントサービス
@font-faceでCSSからフォントを読み込み
WOFF2形式が最も軽量で全ブラウザ対応
日本語フォントはファイルサイズが大きいのでサブセット化が重要

Webフォントのイメージ

ひよこ

なぜWebフォントが必要なの？

ペンギン先生

OSやデバイスによってインストール済みのフォントが違うから、システムフォントだけだとデザインが崩れる。WindowsにはMSゴシックがあるけどMacにはない。WebフォントならデザイナーがFigmaで選んだフォントをWebサイトでもそのまま再現できるんだよ

ひよこ

Google Fontsの使い方は？

ペンギン先生

HTMLのheadにlinkタグを追加するだけ。で日本語フォントNoto Sans JPが使えるようになる。CSSでfont-family: 'Noto Sans JP', sans-serif;と指定。Google FontsはCDN経由で高速配信されて完全無料だよ

ひよこ

日本語Webフォントは重い？

ペンギン先生

日本語フォントは漢字が数千〜数万文字あるから、英語フォント（数十KB）と比べて数MB〜数十MBと桁違いに大きい。対策は①サブセット化（使う文字だけ抽出）、②unicode-rangeでCSSから必要な範囲だけ読み込む、③Google Fontsは自動的に最適なサブセットを配信してくれる。Noto Sans JPは動的サブセットに対応しているよ

ひよこ

パフォーマンスの注意点は？

ペンギン先生

①FOIT（Flash of Invisible Text）：フォント読み込み中にテキストが見えなくなる問題。font-display: swapでシステムフォントを先に表示して切り替える。②preloadでフォントの読み込みを優先する。③セルフホスティング（自分のサーバーに置く）でCDNの余分なDNSルックアップを減らす。Core Web VitalsのCLSにも影響するから注意だよ

まとめ：ざっくりこれだけ覚えればOK！

「Webフォント」って出てきたら「Webから配信してブラウザで使えるフォント」と思えればだいたいOK！

📖 おまけ：英語の意味

「Web Font」＝ Webフォント

💬 Webから配信するFont（書体）。どの端末でも統一されたデザインを実現するよ

← 用語集にもどる

Webフォント とは？

Webフォントとは？