【2022年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

　この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。

　「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。

※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。（最終調査日：2022年8月）

font-familyの役割とは

　CSSのfont-familyプロパティは、WebサイトやHTMLメールのフォントを指定するために使用されます。コンテンツの大半はテキスト情報であるため、指定したフォントによって、文章の可読性や視認性に大きな影響を与えます。そのため、意図したフォントで表示されるように、font-familyを正しく指定する必要があります。

　しかしながら、実際にユーザーの端末に表示されるフォントはユーザー側の閲覧環境に依存します。font-familyを正しく指定しても、そのフォントがユーザーのパソコンやスマートフォンに入っていなければ、意図したフォントでは表示されず、代替フォントで表示されることになります。

　font-familyは、あらゆる閲覧環境を想定し、できるだけ多くの環境に対応したフォントを指定しておく必要があります。

　次章からは、具体的なfont-familyの指定方法について解説していきます。CSSによる記述例も多く登場しますので、CSSの基本をまだマスターしていない方は、以下の記事も読んでみてください。

font-familyの指定方法

フォントはどこに指定するべきか

　基本的にフォントは、WebサイトやHTMLメール全体に対して一括指定をします。一般的にはbodyタグに対してCSSでフォントを指定します。

/* サイト全体のフォント指定 */
body {
font-family: "MS Pゴシック" ;
}

　デザインによっては、見出しやメニュー部分のフォントだけを変更したい場合があります。そういった場合には、該当するタグに対してCSSでフォントを指定します。

/* h1見出しのフォント指定 */
h1 {
font-family: "メイリオ" ;
}

/* ナビゲーションメニューのフォント指定 */
nav ul li {
font-family: "メイリオ" ;
}

font-familyに指定できる値

　font-familyプロパティには、「フォントファミリー名」か、「総称フォント名」のいづれかを指定します。

1. フォントファミリー名

　「Arial」や「メイリオ」など、欧文フォントや日本語フォントの具体的な名称のことフォントファミリー名と呼びます。

body {
font-family: "Arial", "メイリオ";
}

　font-familyに指定するフォントファミリー名は、【正式な固有名称】で指定する必要があります。同じフォント名でもOSによって固有名称の表記が異なったり、半角・全角・スペース位置などが間違っていても正しく機能しません。

　代表的なフォントの固有名称表記については、記事の後半で詳しくご紹介しています。

2. 総称フォント名

　ゴシック体や明朝体のように、フォントの大きなカテゴリーのことを「総称フォント」と呼びます。font-familyに指定できる代表的な総称フォント名は、以下の6つです。

body {
font-family: sans-serif;
}

　総称フォントを指定した場合は、通常はOSやブラウザごとにデフォルト設定されたフォントが自動的に適用されます。

　一般的に、総称フォントには、sans-serif（ゴシック体）か、serif（明朝体）のいづれかを指定しておきます。cursive（筆記体）、fantasy（装飾文字）については、実際には具体的なフォントが割り当てられず、ゴシック体や明朝体で表示されるため実用的ではありません。

プロパティの基本書式

　font-familyプロパティの基本書式と注意点について解説します。

1. フォントファミリー名は引用符で囲う

　フォントファミリー名は、日本語フォント・欧文フォント、またフォント名にスペースを含む・含まずを問わず、ダブルクォーテーション（”）、またはシングルクォーテーション（’）の引用符で囲うことが推奨されています。

　最新の各ブラウザでは引用符で囲わなくとも実際には機能します。しかし、フォントファミリー名と総称フォント名との区別をする目的と、フォント名の区切りをわかりやすくするためにも引用符で囲っておくというルールに決めておく方が良いでしょう。

2. 総称フォント名は引用符で囲わない

　一方で、総称フォント名は引用符では囲わないようにしてください。もし引用符で囲ってしまうと、ブラウザがフォントファミリー名として認識してしまい、総称フォント名として正しく機能しない場合があります。

3. 複数のフォントを指定する場合はカンマ区切り

　フォントファミリー名は複数指定が可能です。各フォントファミリー名をカンマ（,）で区切って記述します。カンマの後のスペースは空けても空けなくてもどちらでも構いません。

※フォントファミリー名に、日本語名（例：メイリオ）と英語名（例：Meiryo）の両方を指定する必要はありません。最新の主要ブラウザは、どちらかを指定しておけば問題なく表示されます。両方表記するという方法は、過去に日本語名のフォントを認識しないブラウザがあった名残です。

4. 前に書いたフォントが優先される

　font-familyに複数のフォントを指定した場合、前に書いたフォントから優先的に適用されます。もしユーザーの端末に、指定したフォントが入っていなければ、次のフォント、また次のフォント…という順番で、ブラウザはフォントを探していきます。

必ず抑えておくべきポイント

　ここからは、フォントを指定する際に必ず抑えておくべきポイントをご紹介します。意図したフォントを表示するための重要なポイントになりますので、しっかり覚えておきましょう。

1. OSごとにフォント名を指定する

　Windows、macOS、iOS（iPhone、iPad）などのOSは、それぞれ標準インストールフォント（初めから入っているフォント）が異なります。そのため、font-familyには、各OS表示用に複数のフォント名を指定しておくことが推奨されています。

2. 最後に総称フォントを指定する

　指定したフォントが全て表示されなかった場合の対策として、値の最後に総称フォント（ゴシック体や明朝体）を指定しておきます。

　例えば、以下のフォント指定例をご覧ください。

body {
font-family:"MS Pゴシック",sans-serif;
}

　MS Pゴシックと、総称フォント（sans-serif）のみが指定されています。この場合、Windowsは、MS Pゴシックが適用されます。macOSとiOSには、MS Pゴシックは標準インストールされていないので、sans-serifが適用され、ゴシック体フォントが適用されます。

3. 欧文フォントを指定する場合の注意事項

　以下の例のように、英語部分（半角英数字）に欧文フォント、日本語部分は日本語フォントを指定したい場合があると思います。

　この場合のfont-familyの指定方法は、欧文フォント名を日本語フォント名よりも先に指定することで実現できます。

　日本語フォント名を欧文フォント名より先に指定してしまうと、すべてのテキストが日本語フォントで表示されてしまいますので注意してください。

　すべてのテキストを日本語フォントで表示したい場合には、欧文フォントは指定しないようにしましょう。

代表的なフォントファミリー名

　ここからは各OS（Windows、macOS、iOS）の標準インストールフォント（初めから入っているフォント）の中から、多くのWebサイトで使用されている代表的なフォントファミリー名を紹介していきます。

　それぞれのフォントの表示例と、font-familyに記述すべき固有名称も合わせて記載しておきます。フォントを選定する際の参考にしてみてください。

ゴシック体

MSゴシック

標準インストールOS	font-family記述用の固有名称
	MS Gothic、ＭＳ ゴシック

フォント表示プレビュー
Windows/Chrome表示

MS Pゴシック

標準インストールOS	font-family記述用の固有名称
	MS PGothic、ＭＳ Ｐゴシック

フォント表示プレビュー
Windows/Chrome表示

メイリオ

標準インストールOS	font-family記述用の固有名称
	Meiryo、メイリオ
※

※macOSは標準インストールではなく、Officeをインストールしている場合に自動的にインストールされます。

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

※macOS Mojave10.14.**環境のSafariブラウザでフォントが表示されないバグ有り。

Meiryo UI

標準インストールOS	font-family記述用の固有名称
	Meiryo UI
※

※macOSは標準インストールではなく、Officeをインストールしている場合に自動的にインストールされます。

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

※UIフォントとは、表示幅を狭く設計したフォントです。UIのファイル名やメニュー名の表示用によく使用されています。

游ゴシック

標準インストールOS	font-family記述用の固有名称
	Yu Gothic、游ゴシック
	YuGothic、游ゴシック体

※Windows8.1以降 標準インストール

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

※Windows環境では、文字が細くかすれて見える場合があります。font-weightプロパティを500に設定することで読み易く調整できます。ただし、游ゴシックに続けて指定するフォントは、font-weight:500で太字にならないものを指定する必要があります。

※@font-faceを使って、フォントを再定義する方法も良く紹介されていますが、今後のブラウザバージョンアップによって@font-faceに関する仕様が変更される場合も考えられます。完璧な方法ではないことを理解した上で実装してください。

YU Gothic UI

標準インストールOS	font-family記述用の固有名称
	Yu Gothic UI

※Windows10以降 標準インストール

フォント表示プレビュー
Windows/Chrome表示

ヒラギノ角ゴシック（Hiragino Sans）

標準インストールOS	font-family記述用の固有名称
	Hiragino Sans、ヒラギノ角ゴシック

※末尾にW0〜W9を付加して太さ指定可能。指定無しの場合、h1-h6タグはW7相当、Pタグ等はW4が自動設定されます。

フォント表示プレビュー
macOS/Chrome表示

※ヒラギノ角ゴシック（Hiragino Sans）と、ヒラギノ角ゴシックProN（Hiragino Kaku Gothic ProN）」は、字形自体は同じです。ヒラギノ角ゴシック（Hiragino Sans）の方がフォントフェイスのバリエーションが多い新しく設計されたフォントです。

ヒラギノ角ゴシック ProN（Pro）

標準インストールOS	font-family記述用の固有名称
	Hiragino Kaku Gothic ProN、ヒラギノ角ゴ ProN、Hiragino Kaku Gothic Pro、ヒラギノ角ゴ Pro

※末尾にW3／W6を付加して太さ指定可能。指定無しの場合、h1-h6タグはW6相当、Pタグ等はW3が自動設定されます。
※ProNとProの違いは、ProNがいくつかの漢字が旧字体、Proは略字体。

フォント表示プレビュー
macOS/Chrome表示

※macOS Catalina以降では、font-familyに「Hiragino Kaku Gothic ProN（Pro）」を指定しても、正しくフォントが表示されない問題があります。Hiragino Kaku Gothic Pro(ProN)は、macOS High Sierra以降、すでに書類をサポートするために使える古いフォントのリストに指定されており、今後使用できなくなる可能性も考えられます。代替フォントとして「Hiragino Sans」も指定しておくと安心です。

ヒラギノ丸ゴシック ProN（Pro）

標準インストールOS	font-family記述用の固有名称
	Hiragino Maru Gothic ProN W4、ヒラギノ丸ゴ ProN W4 ※Hiragino Maru Gothic Pro W4、ヒラギノ丸ゴ Pro W4

※末尾にW3／W6を付加して太さ指定可能。指定無しの場合、h1-h6タグはW6相当、Pタグ等はW3が自動設定されます。
※ProNとProの違いは、ProNがいくつかの漢字が旧字体、Proは略字体。
Nの付かないProフォントは、既に書類をサポートするために使える古いフォントのリストに入っています。

フォント表示プレビュー
macOS/Chrome表示

Osaka

標準インストールOS	font-family記述用の固有名称
	Osaka

※Osaka-Monoで等幅フォント（すべての文字の幅が同じ幅のフォント）を指定することも可能です。

フォント表示プレビュー
macOS/Chrome表示

※Osakaは、表示幅を狭く設計したUIフォントです。旧Mac OSにおいて、UIのファイル名やメニュー名の表示用に使用されていました。

明朝体

MS 明朝

標準インストールOS	font-family記述用の固有名称
	MS Mincho、ＭＳ 明朝

フォント表示プレビュー
Windows/Chrome表示

MS P明朝

標準インストールOS	font-family記述用の固有名称
	MS PMincho、ＭＳ Ｐ明朝

フォント表示プレビュー
Windows/Chrome表示

游明朝

標準インストールOS	font-family記述用の固有名称
	Yu Mincho、游明朝
	YuMincho、游明朝体

※Windows8.1以降 標準インストール

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

※Windows環境では、文字が細くかすれて見える場合があります。font-weightプロパティを500に設定することで読み易く調整できます。ただし、游明朝に続けて指定するフォントは、font-weight:500で太字にならないものを指定する必要があります。

※@font-faceを使って、フォントを再定義する方法も良く紹介されていますが、今後のブラウザバージョンアップによって@font-faceに関する仕様が変更される場合も考えられます。完璧な方法ではないことを理解した上で実装してください。

ヒラギノ明朝 ProN（Pro）

標準インストールOS	font-family記述用の固有名称
	Hiragino Mincho ProN、ヒラギノ明朝 ProN Hiragino Mincho Pro、ヒラギノ明朝 Pro

※末尾にW3／W6を付加して太さ指定可能。指定無しの場合、h1-h6タグはW6相当、Pタグ等はW3が自動設定されます。 ※ProNとProの違いは、ProNがいくつかの漢字が旧字体、Proは略字体。
※Nの付かないProフォントは、既に書類をサポートするために使える古いフォントのリストに入っています。

フォント表示プレビュー
macOS/Chrome表示

欧文フォント

Arial

標準インストールOS	font-family記述用の固有名称
	Arial

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

Arial Black

標準インストールOS	font-family記述用の固有名称
	Arial

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

Helvetica

標準インストールOS	font-family記述用の固有名称
	Helvetica

フォント表示プレビュー
macOS/Chrome表示

Helvetica Neue

標準インストールOS	font-family記述用の固有名称
	Helvetica Neue

フォント表示プレビュー
macOS/Chrome表示

※Helvetica Neueは、Helveticaを基に、読みやすさを向上させる目的で字幅や文字間などの設計を見直した改良版フォントです。Helveticaに比べて多くのフォントフェイスを持ちます。

Segoe UI

標準インストールOS	font-family記述用の固有名称
	Segoe UI

フォント表示プレビュー
Windows/Chrome表示

Verdana

標準インストールOS	font-family記述用の固有名称
	Verdana

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

San Francisco

San Franciscoは、Mac、iPhone、iPad、Apple Watch等で使用されているシステムフォントです。San Franciscoを指定する場合は、少し特殊なfont-familyの記述になります。

標準インストールOS	font-family記述用の固有名称
	-apple-system, BlinkMacSystemFont

※「-apple-system」はSafari用、「BlinkMacSystemFont」がChrome用の記述です。カンマ区切りで2つとも記述しておきましょう。
※-apple-system, BlinkMacSystemFontは、フォント名ではなく、システムフォントを指定するための記述です。総称フォントsystem-uiと同義だと考えてください。ダブルクォーテーション（”）やシングルクォーテーション（’）の引用符では囲わないようにしましょう。

フォント表示プレビュー
macOS/Chrome表示

Times New Roman

標準インストールOS	font-family記述用の固有名称
	Times New Roman

フォント表示プレビュー
Windows/Chrome表示
macOS/Chrome表示

※各OS標準インストールフォントについては、著者の独自調査の部分もありますため、調査時期やOSアップデートなどの影響により、内容が異なる場合があります。

おすすめのfont-family設定例

　ここまでの解説を基に、おすすめのfont-family設定を「ゴシック体」「明朝体」「HTMLメール用」の3つタイプでご紹介します。Windows、macOS、iOSの多くの端末で問題なく表示されるようにスタンダードな設定にしてあります。

　必ずしもご紹介するfont-family設定が正解という訳ではありません。フォントを入れ替えたり追加して、最適なfont-family設定にカスタマイズしてみてください。

ゴシック体の設定例

font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;

明朝体の設定例

font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

HTMLメール用の設定例

　HTMLメールの場合も、各OS・端末に入っているフォントが利用されますが、一部のメーラーやWebメールなどでは、メールクライアントのデフォルトフォントが優先表示される場合もあります。

　HTMLメールは、Webサイトに比べると横幅が狭いため、限られたスペースに文字を入れる必要があります。文字幅の狭いUIフォントや、文字間を自動調整してくれるプロポーショナルフォントを使用するとスペースを有効に使うことができるでしょう。

font-family: "Meiryo UI", "Hiragino Sans", "Yu Gothic UI", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif;

CSSセレクタを指定する際のポイント

　Webサイトに比べて、より多くの閲覧環境が存在するHTMLメールにおいて、意図したフォントを確実に表示するには、font-familyプロパティの優先度がなるべく高くなるように、CSSセレクタの指定方法を工夫すると良いでしょう。

　テーブルレイアウトでHTMLメールを作成している場合は、BODYタグではなくTDタグに対してfont-familyを設定したり、 !Important指定を付加してCSS優先度を上げておきましょう。

td {
font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Yu Gothic UI", "MS PGothic", sans-serif !Important;
}

⇓ こちらの記事も参考になります

PCにインストールされているフォントを調べてみよう

　font-familyの理解を深めるために、自分のパソコンに入っている標準インストールフォントを調べて、font-familyに設定してみましょう。font-familyに設定するべき固有名称を調べたり、フォントフェイス（太さやスタイル）のバリエーションを確認する際にも役立ちます。

Windowsの場合

macOSの場合

まとめ

　以上、font-familyの設定方法について解説してきました。前述した通り、ブラウザに表示されるフォントは、ユーザー側の環境に依存しますが、今回ご紹介した方法で、正しくfont-familyを指定していただければ、多くの環境で意図したフォントを表示させることができるはずです。

　また、font-familyの設定と合わせて、フォントサイズ、行間、文字間、文字色などのスタイルも上手く組み合わせてみてください。皆さまのWebサイトやHTMLメールの読みやすさをさらに向上させることができるはずです。

　最後までお読みいただき、ありがとうございました。