Webデザインで使える font-family の基本とおすすめフォント例

Webサイトの文字はフォント次第で印象が大きく変わります。ここでは代表的な font-family の使い方とおすすめフォント例をご紹介します。

1 フォントの基本書き方

p {
    font-family: "Noto Sans JP", sans-serif;
}

複数のフォントを指定する場合は、カンマで区切ります。ブラウザが順に確認していき、使えるフォントがあればそれを表示します。

2 代表的なフォント例

• Noto Sans JP（日本語向け、読みやすく軽量）
• Roboto（Google Fonts、モダンなサンセリフ）
• Arial（Windows標準、英語向け）
• Times New Roman（定番のセリフ体）
• Courier New（等幅フォント、コード表示向け）
• Georgia（美しいセリフ体、文章向き）
• Hiragino Kaku Gothic Pro（Mac標準、日本語ゴシック体）
• Yu Gothic（Windows 10標準、日本語ゴシック体）
• Verdana（英語向け、可読性高いサンセリフ）
• Tahoma（英語向け、Windows向けのサンセリフ）
• PT Serif（Google Fonts、文章向けセリフ体）
• Fira Code（コード表示に最適な等幅フォント、Ligature対応）
• Open Sans（Google Fonts、Webで広く使われるサンセリフ）
• Source Sans Pro（Google Fonts、落ち着いたサンセリフ）

3 HTML・PHPでの利用例

echo '<p style="font-family: Roboto, sans-serif;">こんにちは、世界！</p>';

4 JavaScriptで動的にフォントを変える例

document.getElementById('myText').style.fontFamily = 'Georgia, serif';

HTML側に：

<p id="myText">動的にフォントを変えるサンプル</p>

5 汎用CSS 例

/* 記事本文全体のフォント */
.entry-content {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.8;
    font-size: 16px;
}

6 まとめ

フォントはサイトの印象を大きく左右します。複数フォントを組み合わせたり、Google Fontsを使うとさらに幅が広がります。
ブログ記事やLPでも、font-family を意識して文字をデザインすると読みやすく美しいサイトになります。