CSSのフォントファミリー指定を完全解説！初心者でも分かるおすすめ書体の使い方

1. CSSでフォントファミリーを指定するとは？

1. CSSでフォントファミリーを指定するとは？

CSS（シーエスエス）では、font-family（フォント・ファミリー）というプロパティを使って、文字の「書体」を変えることができます。書体とは、文字の形やデザインのことで、文章の印象を大きく左右します。

たとえば、学校の教科書のようなきっちりした印象にしたいときは「明朝体」、ポスターやサイトで見やすくしたいときは「ゴシック体」などを選ぶとよいでしょう。

CSSでの書き方はとてもシンプルです。次のように指定するだけです：

<style>
p {
    font-family: "Arial", "Helvetica", sans-serif;
}
</style>

<p>これはArialフォントで表示される段落です。</p>

このように、"Arial"や"Helvetica"といった特定のフォント名を指定し、その後ろにsans-serif（サンセリフ）と書くことで、パソコンに指定フォントがない場合でも似たような書体で表示されるようになります。

2. 「ゴシック体」と「明朝体」の違いを知ろう

2. 「ゴシック体」と「明朝体」の違いを知ろう

初心者がよく使う2つの書体が、「ゴシック体」と「明朝体」です。

• ゴシック体（sans-serif）：線の太さが均一で、読みやすく、現代的な印象があります。
• 明朝体（serif）：文字の線の端に飾り（セリフ）があり、上品で落ち着いた印象があります。

それぞれの書体をCSSで指定するには、次のようにします。

<style>
.gothic {
    font-family: "Arial", "Helvetica", sans-serif;
}
.mincho {
    font-family: "Times New Roman", "serif";
}
</style>

<p class="gothic">これはゴシック体の文章です。</p>
<p class="mincho">これは明朝体の文章です。</p>

日本語Webサイトでは「游ゴシック」や「メイリオ」「ヒラギノ角ゴ」などもよく使われます。

3. フォント指定の書き方と順番のコツ

3. フォント指定の書き方と順番のコツ

font-familyでは、複数のフォント名をカンマ（,）で区切って書くのが一般的です。これは、パソコンやスマホにフォントが入っていない場合に備えて、代わりのフォントを指定するためです。

最初に使いたいフォントを書き、その後に似た雰囲気のフォントを続けて指定しましょう。最後には、必ず「sans-serif」や「serif」などの「汎用フォント」を入れておくと安心です。

4. 初心者におすすめのWebフォント

4. 初心者におすすめのWebフォント

Webフォントとは、インターネット上にあるフォントを使って、どんなパソコンやスマホでも同じ書体で表示させる仕組みです。Google Fonts（グーグルフォント）という無料サービスを使えば、誰でも簡単にWebフォントを使うことができます。

例：Google Fontsの「Noto Sans Japanese」という日本語フォントを使う場合

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<style>
body {
    font-family: 'Noto Sans JP', sans-serif;
}
</style>

<p>これはWebフォント「Noto Sans JP」を使った文章です。</p>

このように、<link>タグでGoogle Fontsを読み込み、CSSでfont-familyを指定するだけで使えます。特別な設定やソフトはいりません。

5. フォント名にスペースがある場合の注意点

5. フォント名にスペースがある場合の注意点

フォント名に空白（スペース）が入っているときは、ダブルクォーテーション（"）で囲む必要があります。たとえば、次のように書きます：

<style>
h1 {
    font-family: "Times New Roman", serif;
}
</style>

<h1>Times New Romanの見出し</h1>

このように、フォント名に空白が含まれているときは、必ず「" "」で囲むのがCSSのルールです。

6. フォントの雰囲気で印象を変える

6. フォントの雰囲気で印象を変える

文字の書体によって、サイト全体の雰囲気や読みやすさが大きく変わります。たとえば：

• ビジネス系のサイト：Arial や Noto Sans など、シンプルで洗練された書体
• 和風デザインのサイト：游明朝 や 源ノ明朝（GenShinGothic）など
• 子供向けや手書き風：Comic Sans MS や UD デジタル教科書体など

フォントの選び方ひとつで、見る人に与える印象が変わるため、目的に合わせて書体を選ぶことが大切です。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CSSで文字の書体を変更するにはどうすればいいですか？

CSSでは、font-familyプロパティを使うことで文字の書体（フォント）を変更できます。文字の雰囲気や印象を変えるために重要なスタイル指定です。