Webサイトのフォントは、デザインの印象を大きく左右する要素です。同じレイアウト・同じ配色でも、フォントを変えるだけでサイト全体の雰囲気がガラリと変わります。
Webフォントとは、サーバーやCDNからフォントデータを読み込んで表示する仕組みのことで、ユーザーの端末にフォントがインストールされていなくても意図したデザインを再現できるのが最大のメリットです。Google Fontsをはじめとする無料サービスの普及により、導入のハードルは大幅に下がっています。
この記事では、Webフォントの基本知識から選び方のポイント、パフォーマンスへの影響と対策まで、実務で役立つ情報を網羅的に解説します。
Webフォントの基本
システムフォントとWebフォントの違い
システムフォントは、ユーザーのPCやスマートフォンにプリインストールされているフォントです。Windows・macOS・iOS・Androidでインストール済みのフォントが異なるため、環境によって表示が変わる点がデメリットです。
一方、Webフォントはサーバーからフォントデータを取得して表示するため、どの端末・どのOSでも同じフォントで表示できるのが特長です。ブランドイメージの統一やデザインの精度向上に貢献します。
Webフォントの仕組み
Webフォントの読み込み方法は主に2つあります。
- 外部サービス（CDN）から読み込む：Google Fontsなどのサービスが提供するリンクをHTMLまたはCSSに記述する方法。最も手軽
- セルフホスティング：フォントファイルを自分のサーバーに設置し、CSSの@font-faceで読み込む方法。外部サービスへの依存がなくなる
Google Fontsの使い方
Google Fontsは、Googleが提供する無料のWebフォントサービスです。1,900以上のフォントファミリーが登録されており、商用利用も含めて完全無料で使えます。
導入手順
Google Fontsの導入は3ステップで完了します。
- Google Fontsのサイトでフォントを検索・選択する
- 使いたいウェイト（太さ）を選び、表示されるHTMLコードまたはCSSコードをコピーする
- HTMLの
<head>内にリンクタグを貼り付け、CSSのfont-familyで指定する
おすすめの日本語フォント
Google Fontsには日本語フォントも多数収録されています。日本語Webフォントは文字数が多い分ファイルサイズが大きくなりますが、Google Fontsでは必要な文字だけを読み込む「サブセッティング」が自動で行われるため、パフォーマンスへの影響が軽減されます。
- Noto Sans JP：GoogleとAdobeが共同開発したゴシック体。可読性が高く、あらゆるサイトに合うオールラウンダー
- Noto Serif JP：Notoファミリーの明朝体。格式のあるサイトや読み物コンテンツに最適
- M PLUS 1p：モダンで柔らかい印象のゴシック体。個性を出したいサイトに向いている
- BIZ UDPGothic：UD（ユニバーサルデザイン）フォント。高い可読性と視認性を兼ね備えている
- Zen角ゴシック New：落ち着いた印象のゴシック体。コーポレートサイトとの相性が良い
- さわらびゴシック：柔らかい印象のゴシック体。カジュアルなサイトやブログに向いている
日本語フォントを選ぶ際は、必ず「漢字の収録範囲」を確認しましょう。一部のフォントは常用漢字しか対応しておらず、固有名詞や専門用語が表示されないことがあります。Noto Sans JPとNoto Serif JPはJIS第一・第二水準をカバーしており、ほぼすべての日本語に対応しています。
フォント選びの基本ポイント
ゴシック体と明朝体の使い分け
日本語フォントは大きく「ゴシック体」と「明朝体」に分かれます。それぞれ与える印象が異なるため、サイトの目的やターゲットに合わせて選びましょう。
- ゴシック体：モダン・カジュアル・親しみやすい印象。ディスプレイ表示での可読性が高い。企業サイト・ブログ・ECサイトに幅広く使える
- 明朝体：上品・格式・知的な印象。長文の読みやすさに優れている。ブランドサイト・メディアサイト・和風デザインに向いている
ウェイト（太さ）の選び方
フォントのウェイトは100（Thin）から900（Black）まであり、用途に応じて使い分けます。
- 本文：Regular（400）が基本。Light（300）は細すぎて読みにくくなることがある
- 見出し：Bold（700）またはMedium（500）。ページ内の視覚的階層を作る
- 強調テキスト：SemiBold（600）。本文と見出しの中間的な強調に使える
読み込むウェイト数が増えるほどフォントファイルのサイズが大きくなるため、使うウェイトは2〜3種類に絞るのがパフォーマンスの観点から推奨されます。
フォントの組み合わせ
1つのサイトで使うフォントは原則2種類まで。見出し用と本文用で1つずつ選ぶのが基本パターンです。
- ゴシック体 + ゴシック体：見出しにM PLUS 1p Bold、本文にNoto Sans JP Regularなど。統一感のあるモダンなデザインに
- 明朝体 + ゴシック体：見出しにNoto Serif JP、本文にNoto Sans JPなど。メリハリがあり読みやすい
- 欧文フォント + 日本語フォント：英数字だけ別のフォントに。Montserrat + Noto Sans JPのような組み合わせが人気
Webフォントのパフォーマンス対策
Webフォントは便利な反面、ファイルサイズが大きいとページの表示速度に影響を与える点に注意が必要です。特に日本語フォントは文字数が多いため、対策を講じておくことが重要です。
font-displayプロパティの設定
CSSのfont-displayプロパティで、フォント読み込み中のテキスト表示方法を制御できます。
- swap：フォント読み込み中はシステムフォントで表示し、読み込み完了後にWebフォントに切り替える。最も推奨される設定
- fallback：短い間（約100ms）だけテキストを非表示にし、その後はシステムフォントで表示。フォントの読み込みが遅い場合はWebフォントに切り替わらないこともある
- optional：通信環境が良い場合のみWebフォントを適用する。モバイル環境での表示速度を優先する場合に有効
プリロードの活用
HTMLの<link rel="preload">を使うと、フォントファイルを早い段階で読み込み始めることができます。ファーストビューで使うフォントのウェイトのみプリロードするのが効果的です。
サブセッティング
フォントファイルから実際に使う文字だけを抽出し、ファイルサイズを削減する手法です。Google Fontsでは自動的にサブセッティングが行われますが、セルフホスティングの場合はサブセットフォントメーカーなどのツールを使って手動で行います。
フォントファイルの形式にも注意が必要です。WOFF2形式は従来のWOFF形式と比較して約30%ファイルサイズが小さく、現在の主要ブラウザはすべてWOFF2に対応しています。セルフホスティングの場合はWOFF2形式を優先しましょう。
font-display: swap;を設定するだけでも体感速度がかなり改善されるよ。CSSでのフォント指定のベストプラクティス
font-familyの書き方
CSSのfont-familyは、フォールバック（代替フォント）を含めて指定するのが基本です。Webフォントが読み込めなかった場合に備えて、システムフォントを後方に記述しておきます。
例として、font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;のように記述します。最後にジェネリックファミリー（sans-serif / serif）を指定しておくのがルールです。
フォントサイズの設定
本文のフォントサイズは16pxを基準にするのが一般的です。MDN Web Docsでも、ブラウザのデフォルトフォントサイズは16pxと記載されています。行間（line-height）は1.5〜1.8が読みやすい範囲です。
レスポンシブなフォントサイズ
画面サイズに応じてフォントサイズを調整する場合、clamp()関数が便利です。最小値・推奨値・最大値を1行で指定でき、メディアクエリを使わずにレスポンシブなフォントサイズを実現できます。
フォントのライセンスに関する注意点
フォントにはそれぞれライセンスがあり、無料だからといってすべての用途で自由に使えるわけではありません。Google Fontsのフォントはオープンソースライセンス（SIL Open Font Licenseなど）で提供されており、個人・商用問わず無料で使えます。
有料フォントや独自のフォントを使用する場合は、Webフォントとしての利用が許可されているかをライセンスで確認する必要があります。デスクトップ用ライセンスとWebフォント用ライセンスは別々に設定されていることが多いため注意しましょう。
よくある質問（Q&A）
Q：Webフォントを使うと表示速度は遅くなりますか？
A：フォントファイルの読み込み分だけ表示速度への影響があります。ただし、font-display: swapの設定やウェイト数の絞り込み、WOFF2形式の使用などの対策を行えば、体感速度への影響は最小限に抑えられます。
Q：Google Fonts以外の無料Webフォントサービスはありますか？
A：Adobe Fontsは、Adobe Creative Cloudの契約者であれば追加費用なしで利用できます。そのほか、Font Squirrelではセルフホスティング用の無料フォントをダウンロードできます。
Q：WordPressでGoogle Fontsを使うにはどうすればいいですか？
A：多くのWordPressテーマにはGoogle Fontsの設定機能が組み込まれています。テーマのカスタマイザーや設定画面からフォントを選択するだけで適用できます。テーマに機能がない場合は、子テーマのheader.phpにリンクタグを追加する方法が一般的です。
Q：日本語フォントと英語フォントを別々に指定できますか？
A：CSSのfont-familyで英語フォントを先に、日本語フォントを後に記述すると、英数字は英語フォントで、日本語は日本語フォントで表示されます。例：font-family: ‘Montserrat’, ‘Noto Sans JP’, sans-serif;
Q：可変フォント（Variable Fonts）とは何ですか？
A：1つのフォントファイルで太さ（weight）や幅（width）を連続的に変更できるフォント技術です。複数のウェイトを個別に読み込む必要がなくなるため、ファイルサイズの削減と柔軟なデザインの両立が可能です。Google FontsではNoto Sans JPなどが可変フォントに対応しています。
まとめ
Webフォントの選択は、サイトの読みやすさとデザイン品質に直結する重要な決定です。Google Fontsを活用すれば、無料でプロフェッショナルなタイポグラフィを実現できます。
フォント選びに迷ったら、まずNoto Sans JPを導入するところから始めてみてください。本文はRegular（400）、見出しはBold（700）の2ウェイトで、多くのサイトに対応できます。font-display: swapの設定も忘れずに行い、表示速度への影響を最小限に抑えましょう。
