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

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

 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひ正しい設定ができるようにしておきましょう。

font-familyの役割とは

 CSSのfont-familyプロパティは、WebサイトやHTMLメールのフォントを指定するために使用されます。コンテンツの大半はテキスト情報です。指定したフォント次第で、読み易くも、読み難くもなるため、font-familyはとても重要な役割を果たします。

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

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

 次章からは、具体的なfont-familyの指定方法について解説していきます。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つです。

総称フォント名 フォントカテゴリー 適用フォント例
sans-serif ゴシック体 メイリオ、ヒラギノ角ゴシック、Arial
serif 明朝体 MS P明朝、ヒラギノ明朝、Times
system-ui OSのUIと同じフォント Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco
monospace 等幅フォント MSゴシック、MS明朝、Osaka-Mono
cursive 筆記体 Comic Sans MS、Scriptなど
fantasy 装飾系フォント alba、Chickなど
body {
	font-family: sans-serif;
}

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

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

プロパティの基本書式

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

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

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

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

 フォントファミリー名とは逆に、総称フォント名は引用符では囲わないようにしてください。

 もし引用符で囲ってしまうと、フォントファミリー名として認識してしまい、総称フォント名として正しく機能しません。

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

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

※フォントファミリー名に、日本語名(例:メイリオ)と英語名(例:Meiryo)の両方を指定する必要はありません。最近の主要ブラウザは、英語名のみ書いておけば問題ありません。

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

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

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

 ここからは、フォントを指定する際に必ず抑えておくべきポイントをご紹介します。

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

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

Android対応について

 「Androidの表示用フォントは?」と思った方もいると思いますが、現状Android表示用のfont-familyは設定する必要はないと思います。理由は、OSのバージョン、メーカー、機種などによってインストールされている日本語フォントがまちまちで、全てのAndroid環境をカバーするには設定が複雑になり過ぎるからです。

 Android表示用のフォントは何も指定せず、それぞれの端末のシステムフォント(デフォルト表示フォント)で表示させるの対応で問題ないでしょう。もし最低限の指定をしておきたい場合は、Android端末の代表的な欧文フォント「Roboto」を指定しておいても良いでしょう。

※Android端末は、明朝体が入っていない場合が多数です。総称フォントで明朝体(serif)を指定しても、ゴシック体(sans-serif)で表示されていると思った方が良いでしょう。どうしても明朝体で表示させたい場合には、Webフォントを利用する方法もあります。

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

 指定したフォントが全て表示されなかった場合に備えて、最低限の指定として、値の最後に総称フォント(ゴシック体や明朝体)を指定しておきましょう。

 例えば以下のフォント指定例の場合、まずWindowsは、MS Pゴシックが適用されます。次に、macOSにはMS Pゴシックは標準インストールされていないので、sans-serif系のゴシック体フォントが適用されます。

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

font-familyが無指定だった場合の注意点

 もしfont-familyにフォントファミリー名も総称フォントも指定されなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。

 大半のブラウザのデフォルトフォントは、ゴシック体ですが、macOSとiOS(iPhone、iPad)の標準ブラウザSafariだけはデフォルトフォントが明朝体になっています。

 また、今後のOSやブラウザのバージョンアップによって、標準インストールフォントや、デフォルトフォントが変更になる可能性もあります。総称フォントは必ず指定しておくようにしましょう。

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

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

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

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

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

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

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

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

ゴシック体

MSゴシック

標準インストールOS font-family記述用の固有名称
MS Gothic
MS ゴシック
フォント表示プレビュー
Windows10/Chrome表示
MSゴシック書体見本

MS Pゴシック

標準インストールOS font-family記述用の固有名称
MS PGothic
MS Pゴシック
フォント表示プレビュー
Windows10/Chrome表示
MSPゴシック書体見本

メイリオ

標準インストールOS font-family記述用の固有名称
Meiryo
メイリオ
フォント表示プレビュー
Windows10/Chrome表示
メイリオ書体見本
macOS Mojave/Chrome表示
メイリオ書体見本

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

Meiryo UI

標準インストールOS font-family記述用の固有名称
Meiryo UI
フォント表示プレビュー
Windows10/Chrome表示
メイリオUI書体見本
macOS Mojave/Chrome表示
メイリオUI書体見本

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

游ゴシック

標準インストールOS font-family記述用の固有名称
Yu Gothic
游ゴシック
YuGothic
游ゴシック体
フォント表示プレビュー
Windows10/Chrome表示
游ゴシック書体見本
macOS Mojave/Chrome表示
游ゴシック書体見本

※Windows環境では、文字が細くかすれて見える場合があります。font-weightプロパティを500に設定することで読み易く調整できます。

YU Gothic UI

標準インストールOS font-family記述用の固有名称
Yu Gothic UI
フォント表示プレビュー
Windows10/Chrome表示
Yu Gothic UI書体見本

ヒラギノ角ゴシック(Hiragino Sans)

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

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

フォント表示プレビュー
macOS Mojave/Chrome表示
Hiragino Sans書体見本

※ヒラギノ角ゴシック(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 Mojave/Chrome表示
ヒラギノ角ゴシック ProN書体見本

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は略字体。

フォント表示プレビュー
macOS Mojave/Chrome表示
ヒラギノ丸ゴシックProN書体見本

Osaka

標準インストールOS font-family記述用の固有名称
Osaka
フォント表示プレビュー
macOS Mojave/Chrome表示
Osaka書体見本

明朝体

MS 明朝

標準インストールOS font-family記述用の固有名称
MS Mincho
MS 明朝
フォント表示プレビュー
Windows10/Chrome表示
MS 明朝書体見本

MS P明朝

標準インストールOS font-family記述用の固有名称
MS PMincho
MS P明朝
フォント表示プレビュー
Windows10/Chrome表示
MS P明朝書体見本

游明朝

標準インストールOS font-family記述用の固有名称
Yu Mincho
游明朝
YuMincho
游明朝体
フォント表示プレビュー
Windows10/Chrome表示
游明朝書体見本
macOS Mojave/Chrome表示
游明朝書体見本

※Windows環境では、文字が細くかすれて見える場合があります。font-weightプロパティを500に設定することで読み易く調整できます。

ヒラギノ明朝 ProN(Pro)

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

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

フォント表示プレビュー
macOS Mojave/Chrome表示
ヒラギノ明朝ProN書体見本

欧文フォント

Arial

標準インストールOS font-family記述用の固有名称
Arial
フォント表示プレビュー
Windows10/Chrome表示
Arial書体見本
macOS Mojave/Chrome表示
Arial書体見本

Arial Black

標準インストールOS font-family記述用の固有名称
Arial Black
フォント表示プレビュー
Windows10/Chrome表示
Arial Black書体見本
macOS Mojave/Chrome表示
Arial Black書体見本

Helvetica

標準インストールOS font-family記述用の固有名称
Helvetica
フォント表示プレビュー
macOS Mojave/Chrome表示
Helvetica書体見本

Helvetica Neue

標準インストールOS font-family記述用の固有名称
Helvetica Neue
フォント表示プレビュー
macOS Mojave/Chrome表示
Helvetica_Neue書体見本

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

Segoe UI

標準インストールOS font-family記述用の固有名称
Segoe UI
フォント表示プレビュー
Windows10/Chrome表示
Segoe UI書体見本

Verdana

標準インストールOS font-family記述用の固有名称
Verdana
フォント表示プレビュー
Windows10/Chrome表示
Verdana書体見本
macOS Mojave/Chrome表示
Verdana書体見本

San Francisco

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

※「-apple-system」はSafari用、「BlinkMacSystemFont」がChrome用の記述です。カンマ区切りで2つとも記述しておきましょう。

フォント表示プレビュー
macOS Mojave/Chrome表示
San Francisco書体見本

※San Franciscoは、Mac、iPhone、iPad、Apple Watch等で使用されているシステムフォントです。総称フォントに「system-ui」を指定した場合にも適用されるフォントです。

Times New Roman

標準インストールOS font-family記述用の固有名称
Times New Roman
フォント表示プレビュー
Windows10/Chrome表示
Times New Roman書体見本
macOS Mojave/Chrome表示
Times New Roman書体見本

おすすめのfont-family設定例

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

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

ゴシック体の設定例

Winの欧文フォント Arial
Winの日本語フォント 游ゴシック
代替フォント:メイリオ
macOSの欧文フォント Helvetica Neue
代替フォント:Helvetica
macOSの日本語フォント Hiragino Sans
代替フォント:Hiragino Kaku Gothic ProN
iOSの欧文フォント Helvetica Neue
代替フォント:Helvetica
iOSの日本語フォント Hiragino Sans
代替フォント:Hiragino Kaku Gothic ProN
総称フォント sans-serif(ゴシック体)
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; 

明朝体の設定例

Winの欧文フォント Times New Roman
Winの日本語フォント 游明朝
代替フォント:MS P明朝
macOSの欧文フォント Times New Roman
macOSの日本語フォント 游明朝体
代替フォント:Hiragino Mincho ProN
iOSの欧文フォント Times New Roman
iOSの日本語フォント Hiragino Mincho ProN
総称フォント serif(明朝体)
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; 

HTMLメール用の設定例

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

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

Winの欧文フォント 未設定(日本語フォントで表示)
Winの日本語フォント Meiryo UI
代替フォント:Yu Gothic UI、MS Pゴシック
macOSの欧文フォント 未設定(日本語フォントで表示)
macOSの日本語フォント Meiryo UI
代替フォント:Hiragino Sans、Hiragino Kaku Gothic ProN
iOSの欧文フォント 未設定(日本語フォントで表示)
iOSの日本語フォント Hiragino Sans
代替フォント:Hiragino Kaku Gothic ProN
総称フォント sans-serif(ゴシック体)
font-family: "Meiryo UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic UI", "MS PGothic", 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の場合

Windows10の場合

[設定] > [個人用設定] > [フォント]から、インストールされているフォントを確認できます。

font-familyに設定するフォントファミリーの固有名称は、「完全名」を参照してください。

Windows10以前のOS場合

[ローカルディスク(C:)] > [Windows] > [Fonts] から、インストールされているフォントを確認できます。

font-familyに設定するフォントファミリーの固有名称は、初期設定では表示されていません。以下の手順でフォントファミリー名を表示します。

[表示手順]
1. 表示方法を[詳細]に変更する。
2. 項目名を右クリックして、[ファミリ]にチェックする。

macOSの場合

[アプリケーション] – [Font Book]から、インストールされているフォントを確認できます。

font-familyに設定するフォントファミリーの固有名称は、「PostScript名」や「正式名称」を参照してください。

著者
WiLL Cloudマーケティングチームのロゴ
WiLL Cloud マーケティングチーム

ウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

メルマガ登録 »