font-familyの書き方まとめ：CSSでフォント種類を指定しよう

今回は、フォント種類を指定するCSSの「font-family」の書き方についてイチから解説します。

font-familyの書き方

CSSでは文字のフォントをfont-familyプロパティで指定します。プロパティの意味はCSS入門でも解説しています。

例えばこのコードは「pタグ内のフォントを'Impact'にする」という意味になります。

このようにセレクタ { font-family: フォント名; }の形で指定します。

基本的に複数のフォントを指定する

複数のフォント名を優先したい順に並べ、カンマで区切ります。最後にはsans-serifなどの総称フォントファミリー名を置きましょう。

複数のフォントを書く理由

利用できるフォントはOS・そのバージョン・追加インストールの有無によって異なります。最初の候補が使えないときに備え、複数の候補を指定します。さらに、選ばれたフォントに特定の文字の字形がない場合にも、後ろの候補が使われます。上の図は仕組みを単純化したものです。

前に書かれたフォントが優先される

ブラウザは指定順を優先します。たとえば先頭のAvenirが利用できなければ後続の候補を試します。また、先頭のフォントに日本語の字形がない場合は、その文字だけ後続のフォントで表示されます。図のように常にページ全体が1種類へ切り替わるわけではありません。

英字用フォントを先に書く場合

英字中心のフォントを先に書くと、英字にはそのフォント、日本語には字形を持つ後続のフォントが使われることがあります。この組み合わせを使いたいときの並べ方です。

上の図は英字と日本語でフォントが切り替わる一例です。どの文字を表示できるかはフォントごとに異なります。英字も日本語用フォントで統一したい場合は、そのフォントを前に置きます。

空白を含むフォント名は引用符で囲むと分かりやすい

「Avenir Next」のようにフォント名の間に半角スペースが入るものがあります。

空白を含むフォント名は、'または"で囲むと読みやすく、確実に一つの名前として扱えます。'Times New Roman'などが例です。空白を含む名前でも、引用符が必須とは限りません。

なお、シングルクオテーション'を使ってもダブルクオーテーション"を使っても構いません。また、間に半角スペースの入っていないフォントをクオテーションではさんでも問題ありません。

最後に総称フォントファミリー名を書く

総称フォントファミリー名と呼ばれるものをfont-familyの一番最後に書きます。「sans-serif」とかいうやつですね。

総称フォントファミリーとは？

総称フォントファミリーのイメージは「最後の砦」です。もしページを開いたパソコンに指定したフォントが全く入っていなかった場合に「せめてこういう系統のフォントを表示して」とブラウザに伝えておくわけですね。

この図は代表的な5種類の総称フォントファミリーを紹介しています。sans-serifはゴシック体のような字形、serifは明朝体のような字形を求める指定です。現在はsystem-uiなど、ほかの種類もあります。

あくまでも「こういう系のフォントを使って」という指定になるので、実際に何のフォントが使われるかはブラウザによって異なります。

この画像は作成当時のChromeでの表示例です。現在の表示はOS・ブラウザ・設定によって異なり、cursiveやfantasyが同じ見た目になるとは限りません。

「sans-serif」か「serif」を使おう

本文をゴシック体にしたいときはsans-serif、明朝体にしたいときはserifを最後の候補にできます。フォントの指定順と、実機での読みやすさを確かめて選びましょう。

ウェブページ全体のフォントを指定する方法

サイト全体の基本フォントはbodyに指定できます。本文の子要素には通常その指定が継承されますが、別のfont-familyが指定された箇所やフォーム部品では表示が異なる場合があります。

サイト全体にフォントを適用する

body {
  font-family: Arial, YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif;
}

おすすめのfont-familyの書き方は？

複数のOSを想定した指定例です。フォントの収録状況は環境で異なるため、実際の見え方を確認して調整してください。最後には総称フォントファミリー名を追加しています。

おすすめのフォント

body {
  font-family: Avenir, 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans',
    'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

各環境に対応しているフォント種類はどこで確認できるの？

OSごとのフォントは、MicrosoftのWindows 11フォント一覧やAppleのmacOSフォント一覧など、OS提供元の情報で確認できます。搭載状況はOSのバージョンや追加インストールによって変わります。

Android向けのフォントについて

AndroidではOS・端末・追加フォントによって利用できるフォントが異なります。以下はこの記事の作成当時に使われていた例です。現在の端末すべてに搭載されているという意味ではありません。

• Droid Sans
• Roboto

Androidでも端末間で同じフォントになるとは限りません。特定のフォント名だけに頼らず、最後にsans-serifなどを指定し、必要ならWebフォントの利用を検討してください。

font-familyを書くときのコツ

フォントを指定するときのポイントをまとめておきます。

【参考】ウェブフォントも合わせて使おう

Webフォントは、端末にないフォントをWebから読み込んで使う方法です。読み込みが成功し、対象の文字を収録している場合に指定したフォントで表示されます。通信できない場合や字形がない場合に備え、後ろには代替フォントも並べてください。詳しくは以下の記事を参照してください。