CSSでフォントをゴシック体・明朝体に指定する方法

ホームページは文字がいっぱいですが、その文字もできるだけ読みやすいフォントにしたいものです。

CSSでフォントをゴシック体・明朝体に指定する方法を解説します。

font-familyを使う

CSSで書体（フォント）を指定するにはfont-familyを使います。

font-familyに使いたいフォント名を指定します。フォント名は全角・半角、空白も含めて完全一致している必要があります。

body{font-family:'メイリオ','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',sans-serif;}

日本語フォント名は「''」または「""」で囲みます。半角英数のみのフォント名の場合は囲まなくてもOKです。

候補間は「,」で区切ります。

候補を複数用意するのは端末にそのフォントがインストールされていないと表示されないためです。

頭から順に優先され、フォントがインストールされてなければ次のフォントが表示されます。

サイト全体に指定したい書体は「body」に指定し、それ以外は各タグやclassで指定しましょう。

ゴシック体・明朝体一覧

下記はホームページ作成でよく使われる書体の一覧です。

ただし、お使いの端末にインストールされていないフォントは標準フォントで表示されます。

ゴシック体	Noto Sans JP	あア安1Aa
	游ゴシック Medium	あア安1Aa
	メイリオ	あア安1Aa
	ヒラギノ角ゴ ProN W3	あア安1Aa
	ＭＳ Ｐゴシック	あア安1Aa
	sans-serif	あア安1Aa
明朝体	Noto Serif JP	あア安1Aa
	游明朝 Medium	あア安1Aa
	ＭＳ Ｐ明朝	あア安1Aa
	serif	あア安1Aa

ゴシック体

Noto Sans JP

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
body{font-family: 'Noto Sans JP', sans-serif;}

Noto Sans JPはGoogleが提供する無料のWebフォントです。

Webフォントは他の書体と違い、スマホを含めたどの端末でも表示させることができます。

スマホ版の書体をこだわりたいならWebフォントを使いましょう。

ただし、書体のダウンロードが発生するため文字の表示に時間がかかる場合があります。

游ゴシック Medium

body{font-family: '游ゴシック Medium', sans-serif;}

游ゴシックはWindowsとMacどちらでも表示させることができる書体です。

ただしWindowsでは細く表示されるため「游ゴシック Medium」に指定して読みやすくしましょう。

メイリオ

body{font-family: 'メイリオ', sans-serif;}

Windowsで使える書体です。

明瞭であることを目的としたフォントであり、読みやすいです。

当サイトでも採用しています。

ただし、Macでは表示されないため下記「ヒラギノ角ゴ ProN W3」をセットで指定しましょう。

ヒラギノ角ゴ ProN W3

body{font-family: 'ヒラギノ角ゴ ProN W3', sans-serif;}

Macで使える書体です。

メイリオ同様明瞭で読みやすいです。

Windowsで表示されないため上記「メイリオ」とセットで指定しましょう。

ＭＳ Ｐゴシック

body{font-family: 'ＭＳ Ｐゴシック', sans-serif;}

紹介はしますが、これを使うメリットはほぼありません。

滑らかさがなく、よみづらいためです。

「ＭＳ Ｐ」を全角で書かないと表示されません。

sans-serif

body{font-family: sans-serif;}

OSまたはブラウザ標準のゴシック体になります。

font-familyを指定するときは最終候補に保険として指定しておきましょう。

明朝体

Noto Serif JP

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap');
body{font-family: 'Noto Serif JP', serif;}

Noto Serif JPはGoogleが提供する無料のWebフォントです。

Webフォントは他の書体と違い、スマホを含めたどの端末でも表示させることができます。

スマホ版の書体をこだわりたいならWebフォントを使いましょう。

ただし、書体のダウンロードが発生するため文字の表示に時間がかかる場合があります。

游明朝 Medium

body{font-family: '游明朝 Medium', serif;}

游明朝はWindowsとMacどちらでも表示させることができる書体です。

ただしWindowsでは細く表示されるため「游明朝 Medium」に指定して読みやすくしましょう。

ＭＳ Ｐ明朝

body{font-family: 'ＭＳ Ｐ明朝', serif;}

紹介はしますが、これを使うメリットはほぼありません。

滑らかさがなく、よみづらいためです。

「ＭＳ Ｐ」を全角で書かないと表示されません。

serif

body{font-family: serif;}

OSまたはブラウザ標準の明朝体になります。

font-familyを指定するときは最終候補に保険として指定しておきましょう。

Webフォントを使う

上記がメインとなるフォントですが、Webフォントを使えばデザインの幅がもっと広がります。

下記記事に無料で使える日本語フォントをまとめていますのでご覧ください。

ゴシック体と明朝体の使い分け

ホームページでは基本的にゴシック体をおススメします。

明朝体は紙では読みやすいのですが、電子媒体になるとその細さが表現できず読みづらくなるためです。

明朝体は和風を表現したいとき、または大きい文字にできるときだけ使うといいでしょう。

【まとめ】ゴシック体･明朝体を指定する方法

font-familyを使う

body{font-family:'メイリオ','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',sans-serif;}

ゴシック体・明朝体一覧

ゴシック体	Noto Sans JP	あア安1Aa
	游ゴシック Medium	あア安1Aa
	メイリオ	あア安1Aa
	ヒラギノ角ゴ ProN W3	あア安1Aa
	ＭＳ Ｐゴシック	あア安1Aa
	sans-serif	あア安1Aa
明朝体	Noto Serif JP	あア安1Aa
	游明朝 Medium	あア安1Aa
	ＭＳ Ｐ明朝	あア安1Aa
	serif	あア安1Aa

以上、CSSでフォントをゴシック体・明朝体に指定する方法でした。