ホームへ

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

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

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

font-familyを使う

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

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

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

font-family:'第一候補','第二候補','第三候補',最終候補

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

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

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

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

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

ゴシック体・明朝体一覧

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

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

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

ゴシック体

Noto Sans JP

あア安1Aa
@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

あア安1Aa
body{font-family: '游ゴシック Medium', sans-serif;}

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

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

メイリオ

あア安1Aa
body{font-family: 'メイリオ', sans-serif;}

Windowsで使える書体です。

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

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

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

ヒラギノ角ゴ ProN W3

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

Macで使える書体です。

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

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

MS Pゴシック

あア安1Aa
body{font-family: 'MS Pゴシック', sans-serif;}

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

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

「MS P」を全角で書かないと表示されません。

sans-serif

あア安1Aa
body{font-family: sans-serif;}

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

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

明朝体

Noto Serif JP

あア安1Aa
@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

あア安1Aa
body{font-family: '游明朝 Medium', serif;}

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

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

MS P明朝

あア安1Aa
body{font-family: 'MS P明朝', serif;}

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

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

「MS P」を全角で書かないと表示されません。

serif

あア安1Aa
body{font-family: serif;}

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

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

Webフォントを使う

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

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

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

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

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

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

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

font-familyを使う

font-family:'第一候補','第二候補','第三候補',最終候補

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

ゴシック体・明朝体一覧

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

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

マンガで読める関連記事