【完全ガイド】 CSSフォントの指定方法｜font-familyとWebフォントの使い方

y.harima

2025.11.26 更新

この記事を共有する

で保存する

LINE

で共有する

このページのURLをコピー

https://kasoudesign.com/knowledge/css-font-family/

クリップボードにコピーしました

もっと知らせる

Webサイトのデザインにおいて、フォント選びは第一印象を左右する重要な要素です。
CSSのfont-familyプロパティを使えば、テキストの書体を自由に指定できますが、正しい指定方法や最適なフォント選択には押さえるべきポイントがあります。

本記事では、font-familyの基本的な使い方から、Webフォントの指定方法を解説します。
読みやすいサイトを作りたい方、フォント指定で悩んでいる方は、ぜひ参考にしてください。

1 font-familyとは
2 font-familyの使い方
- 2.1 引用符（クォート）の有無
3 font-familyで指定できるフォント
4 font-familyを指定する上でのポイント
5 Webフォントの指定方法
6 Webフォントを活用する上でのポイント
7 まとめ
8 フォントに関するナレッジ
9 関連リンク

font-familyとは

font-familyプロパティは、Webコンテンツ（Webサイト、HTMLメールなど）において、テキスト要素に適用するフォントのリストを指定します。コンテンツの大半を占める文字情報において、フォントの選択は可読性や視認性に大きく影響するため、font-familyの正しい指定は極めて重要です。

しかし、実際に表示されるフォントは、ユーザーの端末環境（OSやインストールされたフォント）に依存します。指定したフォントがユーザーの環境に存在しない場合、意図したフォントは反映されず、代替フォントが表示されます。

このため、font-familyでは、多様な閲覧環境に対応できるよう、複数のフォントを優先度の高い順に記述し、フォールバック（代替表示）の経路を確保することが必須です。

font-familyの使い方

font-familyプロパティは、フォント名をカンマ（,）で区切って記述します。
フォント名を指定する基本的なコードは以下の通りです。

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

この例では、ブラウザは左から順にフォントを探し、最終的にどのフォントも見つからなければ、sans-serifというゴシック系の汎用フォント（ジェネリックフォント）を適用します。

引用符（クォート）の有無

フォント名にスペースが含まれる場合は、必ずダブルクォート（"）またはシングルクォート（'）で囲む必要があります。

スペースを含まないフォント名（例: Meiryo、arial ）は引用符を省略できますが、視認性や統一性の観点から引用符を使用しても問題ありません。

font-familyで指定できるフォント

font-familyで指定できるフォントは、大きく分けてシステムフォント（OS標準フォント）、Webフォント（外部から読み込むフォント）、ジェネリックフォント（総称フォント）の3種類があります。

システムフォント（OS標準フォント）

システムフォント（OS標準フォント）は、ユーザーのOSに最初からインストールされているフォントです。

分類	フォント名	搭載OS	特徴
ゴシック体	メイリオ (Meiryo)	Windows	可読性が高く、Webサイトで最も一般的に使用される。
	游ゴシック (YuGothic)	Windows / Mac	Windows 8.1以降の標準フォント。 Macにも搭載されている。
	ヒラギノ角ゴ (Hiragino Kaku Gothic)	Mac / iOS	Mac OS X以降の標準フォント。シャープで美しい字形が特徴。
明朝体	游明朝 (YuMincho)	Windows / Mac	Windows 8.1以降の標準フォント。縦線が細く、横線が太い。上品で落ち着いた印象。
明朝体	ヒラギノ明朝 (Hiragino Mincho)	Mac / iOS	Mac OS X以降の標準フォント。
等幅フォント	monospace	全OS	すべての文字の幅が等しいフォント。コード表示などに使われる。
欧文フォント	Arial	Windows	広く普及しているサンセリフ体。
	Helvetica	Mac / iOS	Mac OSの代表的なサンセリフ体。
	Times New Roman	Windows	伝統的なセリフ体。

Webフォント（外部読み込みフォント）

Webフォントは、フォントファイルをサーバー上に配置し、CSSを介してユーザーのブラウザに読み込ませて表示するフォントです。

ユーザーのOSにそのフォントがインストールされている必要がないため、どの閲覧環境でもデザイナーが意図した通りのフォントを表示できます。

フォント名	提供元	特徴
Roboto	Google Fonts	Androidのシステムフォントとして開発された、クセのないモダンなゴシック体（サンセリフ）。
Noto Sans	Google Fonts	あらゆる言語や文字をサポートするために開発されたサンセリフ体。
Noto Sans CJK JP	Google Fonts	Noto Sansファミリーの日本語版。中国語・日本語・韓国語（CJK）を共通の骨格でデザインしており、簡潔で視認性が高い。
Kozuka (小塚)	Adobe Fonts	DTP（印刷）デザインの基準として開発された日本語フォント。
Merriweather	Google Fonts	画面上で読みやすいようにデザインされた明朝体（セリフ体）。
Montserrat	Google Fonts	アルゼンチンのブエノスアイレスにある歴史的な標識にインスパイアされた幾何学的なゴシック体。
Garamond	Google Fonts	ルネサンス期にフランスで作られた古典的な書体。

ジェネリックフォント（総称フォント）

ジェネリックフォント（総称フォント）は、特定のフォント名ではなく、ブラウザに「この種類のフォントを使え」と指示するための総称名です。

フォントリストの最後に必ず指定します。

フォント名	特徴
sans-serif	ゴシック体やサンセリフ体（セリフなし）
serif	明朝体やセリフ体（飾り線あり）
monospace	等幅フォント
cursive	筆記体（手書き風）
fantasy	装飾的なフォント

font-familyを指定する上でのポイント

デザインの一貫性を保ち、誰にとっても読みやすいWebサイトを実現するために、font-familyの指定にはいくつかの重要なポイントがあります。

優先度の高いフォントから指定する
前述の通り、リストは左から順に評価されるため、最も適用したいフォントを最初に記述します。
英語フォントから先に指定する
日本語フォントと欧文フォントを両方指定する場合、欧文フォント（英数字）を先に指定することが推奨されます。多くの日本語フォントは、欧文の文字セットも持っていますが、欧文フォントの方が欧文の字形が美しく、カーニング（文字詰め）が最適化されていることが多いためです。
OSによる違いに注意する
Mac OSやiOSではヒラギノ系フォント、Windowsではメイリオや游ゴシック系フォントが標準で搭載されています。これらのOS間の違いを考慮し、両方の環境で最適に表示されるように指定することが重要です。

Webフォントの指定方法

Webフォントの読み込みは、Google FontsやAdobe Fontsのようなサービスを利用するか、@font-faceルールを使用します。

Google Fontsの指定方法

Google Fontsは、無料で利用できるWebフォントサービスです。

1. 任意のフォントを選択

Google Fontsのサイトで任意のフォントを選択し、フォントの詳細ページ上部の「Get font」ボタンをクリックします。

その後の画面で、選択されたフォント一覧ページの「Get embed code」ボタンをクリックします。

2. 指定された埋め込みコードHTMLを記述

サイトから提供されるフォントの読み込みコードをコピーし、WebサイトのHTMLファイルにある<head>内に記述します。

3. CSSでの指定

読み込んだフォントをCSSのfont-familyで指定します。

body {
  font-family: 'Roboto', sans-serif;
}

Adobe Fontsの指定方法

Adobe Fontsは、Adobe Creative Cloudのユーザーが利用できるWebフォントサービスです。

1. Webプロジェクトの作成

任意のフォントの詳細ページで、「Webプロジェクトに追加」ボタンをクリックします。

表示された画面（モーダル）で、新しいプロジェクト名を入力するか、既存のプロジェクトを選択します。

使用したいフォントのウェイト（太さ）とスタイル（斜体など）を細かく選択します。
必要なものだけを選ぶことで、サイトの読み込み速度を最適化できます。

2. 指定された埋め込みコードをHTMLに記述

サイトから提供されるフォントの読み込みコードをコピーし、WebサイトのHTMLファイルにある<head>内に記述します。

3. CSSでの指定

読み込んだフォントをCSSのfont-familyで指定します。

body {
  font-family: "kozuka-gothic-pro", sans-serif;
}

Adobe Fontsの使用する際の注意事項

Adobe FontsをWebフォントとして利用する際、受託制作会社（ベンダー）側のアカウントで設定を行うことは、ライセンス上、再販行為と見なされ許可されていません。

したがって、クライアントのWebサイトでAdobe Fontsを使用する場合は、必ずクライアント自身にAdobeの契約を結んでもらい、そのアカウントからWebフォントの設定を行う必要があります。

また、クライアントのAdobe契約が終了してしまうと、サイトで使用していたWebフォントは表示されなくなり、代替フォントに切り替わってしまうため、この点も事前に必ずご説明ください。

Adobe Fonts Web フォント利用に関する FAQ

@font-faceルールによるWebフォントの読み込み

独自に用意したフォントファイル（例: ttfやwoff、woff2ファイル）をサーバーにアップロードし、CSSの@font-faceルールを使ってブラウザに読み込ませることができます。
これは、外部サービスを使わずにカスタムフォントを利用する基本的な方法です。

@font-face {
  /* 1. font-family: この名前をfont-familyプロパティで指定する */
  font-family: "MyCustomFont"; 

  /* 2. src: フォントファイルの場所を指定する */
  src: url('/fonts/mycustomfont.woff2') format('woff2'),
       url('/fonts/mycustomfont.woff') format('woff');
       
  /* 3. font-weight, font-styleなども指定可能 */
  font-weight: normal; 
  font-style: normal;
  
  /* 4. パフォーマンス対策として推奨 */
  font-display: swap; 
}


/* 呼び出し */
body {
  font-family: 'MyCustomFont', sans-serif;
}

この方法で読み込まれたフォントは、font-familyプロパティで指定することで利用可能になります。
また、@font-faceルール内では、Webフォントの読み込みが遅延した場合に一時的にシステムフォントを表示させるためのfont-displayプロパティを指定することも、パフォーマンス対策として重要です。

Webフォントを活用する上でのポイント

Webフォントのファイルサイズは大きいため、Webサイトの読み込み速度に大きく影響します。
デザイン性とパフォーマンスを両立させるため、以下の点に注意が必要です。

フォントのファイルサイズを軽量化（パフォーマンス対策）
Webフォントのファイルサイズは、サイトの表示速度に影響します。Webフォントを活用する際は、Webフォントを多用しすぎないこと、使用するウェイト（太さ）を必要最小限に絞ることが鉄則です。
ライセンスや契約内容を確認する（リスク管理）
Webフォントを利用する際は、著作権やライセンスに関するトラブルを避けるために、必ず利用規約を確認しましょう。特に、Adobe Fontsのようなサブスクリプション型のサービスをクライアントのWebサイトで使用する場合、受託制作会社のアカウント設定はライセンス違反（再販行為）となるため、運用上のリスク管理が不可欠です。