【CSS】文字の装飾!文字の書体(フォントファミリー)を変更する

文字の書体を指定する属性にfont-familyがあります。

値には、フォントファミリー名や後で説明する総称フォント名を複数指定することができます。


body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ W3", Arial, "メイリオ", Meiryo, sans-serif;
}
    

フォントファミリーは文字の書体のことを指し、日本語には大きなカテゴリーとしてゴシック体、明朝体、楷書体などがあります。

ゴシック体にも多くの種類の書体があり、明朝体にも多くの種類の書体があります。

これらのフォントファミリーは端末にインストールされていれば使用することができますが、インストールされていなければ使用することができません
font-family属性には複数の値をカンマ(,)区切りで指定します。
左に指定したフォントファミリーが一番優先度が高く、もし端末にインストールされていない場合はその次に指定しているフォントファミリーを使用しようとします

理解度チェック

  • ゴシック体と明朝体の違いについて調べてみましょう!
  • 端末ごとに表示されるWebのフォントファミリーは異なる場合がありますが、なぜだか理解できましたか?
  • フォントファミリーをリスト形式で指定するのはなぜでしょうか?

総称フォントとは

Webで使用する代表的な書体に、セリフ(serif)体とサンセリフ(sans-serif)体があります。

これらは総称フォントと呼ばれ、セリフ体は明朝体、サンセリフ体はゴシック体を意味します。

セリフ体


div {
    font-family: serif;
}
    
こんにちは

サンセリフ体


div {
    font-family: sans-serif;
}
    
こんにちは

総称フォントの使い方

総称フォントは、指定するフォントファミリーのどれもが利用できない場合に代替的に使用されるフォントとして指定します

例えば、ゴシック体で文字を表示しようとした場合は次のように指定します。


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

"ヒラギノ角ゴ Pro W3""ヒラギノ角ゴ W3"はMac OSに搭載されている日本語のゴシック体フォントです。
"メイリオ""MS Pゴシック"はWindows OSに搭載されています。

このどれもが搭載されていない場合に、総称フォントのsans-serifが適用されます。

セリフ体やサンセリフ体のフォントはユーザーが設定できる

この総称フォントはブラウザごとに設定できるという点にも注意が必要です。

例えば、次の画像はChromeのフォントカスタマイズ画面ですが、ここでserifsans-serifに適用されるフォントファミリーをユーザー自身で指定することができます。

Chromeのフォント設定画面

代表的な総称フォント

総称フォント名 説明
serif 明朝体フォント ヒラギノ明朝MS P明朝
sans-serif ゴシック体フォント ヒラギノ角ゴシックメイリオ
monospace すべての字が等幅であるフォント Osaka-MonoMSゴシック
cursive 筆記体フォント ScriptComic Sans MS
fantasy 遊び心のある装飾系フォント Papyrusalba

理解度チェック

  • 総称フォントについて説明してください!
  • 総称フォントはどの様な場合に使用されますか?
  • 総称フォントはどこに指定しますか?

フォント指定の決まりごと

フォントファミリーには、ダブルクォート(")またはシングルクォート(')の引用符で囲まなければいけない場合と囲んではいけない場合があります


body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ W3", Arial, "メイリオ", Meiryo, sans-serif;
}
    

引用符で囲む必要がある場合

空白がある場合は引用符で囲みましょう。

Hisagino Sans"Hiragino Sans"

英字以外の数値や記号、日本語が含まれる場合も引用符で囲みます。

メイリオ"メイリオ"
Ueten 1c"Ueten 1c"

引用符で囲んではならない場合

総称フォントは引用符で囲んではいけません。

serif"serif"
sans-serif"sans-serif"

フォントファミリーを外部から読み込んで使用する

端末によって使用できるフォントファミリーが異なるため、どの端末でも一貫したデザインを保つためには外部からフォントファミリーを読み込んで使用する方法があります。

Webで使用できるフォントを配布している代表的なサービスにGoogle Fontsがあります。

この中から、日本語フォントの「RocknRoll One」を使用すると次のようになります。


<head>
    ...
    <!-- フォントファミリーを読み込みます -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
    <style>
        p {
            font-family: 'RocknRoll One', sans-serif;
        }
    </style>
    ...
</head>
<body>
    <p>僕は冬より夏が好きです。皆さんはどうですか?</p>
</body>
    

僕は冬より夏が好きです。皆さんはどうですか?

このように外部から読み込むことで、どの端末でも決まったフォントファミリーを使用することが可能です。

しかし、日本語のフォントファミリーは「ひらがな」「カタカナ」「漢字」を含むことから、読み込むファイルのサイズが大きくなりがちです。
そのため、特に通信環境の悪い場所では正しく表示されるまで時間が掛かってしまい「重たいサイト」と思われてしまうこともあります。

フォントファミリーから決まった文字だけを読み込む方法もありますので、使用する場面や使用する方法はしっかり考える必要があります。

理解度チェック

  • フォントファミリーを外部から読み込んで使用してみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。