【初心者向け】CSSのfont-family書き方と優先順位・フォント指定方法を完全解説！
CSSのfont-familyでフォントを指定する際の正しい書き方や、フォントの優先順位・フォールバックの仕組みを理解すると、どの端末でも読みやすいサイトを作れます。
この記事では、CSSのfont-familyの具体的な書き方や複数指定の意味、Webフォントとローカルフォントの違いなど、基礎から順番にわかりやすく解説します。
目次
Webフォントとは？
Webフォントとは、Webページを閲覧するユーザーのデバイスに依存せず、外部のサーバーからフォントファイルを読み込んで表示する仕組みです。これにより、特定のフォントを使用しても、どの端末でも一貫したデザインを提供することができます。例えば、カスタムフォントを使ったおしゃれなデザインのWebサイトも、ユーザーのデバイスに関係なく美しく表示されます。
▼CSSでフォントの見た目を整える方法はこちらから
CSSでフォントを変更・指定する基本の書き方
font-family の使い方と記述例
CSSでは、font-familyプロパティを使ってフォントを指定します。基本的な書き方は以下の通りです。
body {
font-family: "Noto Sans JP", sans-serif;
}この例では、「Noto Sans JP」という日本語Webフォントを指定し、もしそれが利用できない場合は、汎用の「sans-serif」フォントを使うよう指定しています。
フォント指定の優先順位と複数指定の考え方
CSSでフォントを指定するときは、複数のフォントをカンマ（,）で区切って順番に書きます。これは、指定したフォントが利用できないときに次のフォントを表示させる「フォールバック（代替）」の仕組みです。
body {
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}この指定では、以下の優先順位でフォントが適用されます。
- Robotoが使える場合、それが表示されます。
- Robotoが使えない場合、次にHelvetica Neueが表示されます。
- さらに使えない場合は、Arialが表示されます。
- 最後に、sans-serifが表示されます。
すべてのユーザーが同じフォントを持っているとは限らないため、複数の選択肢を準備しておくことが大切です。
日本語フォントの記述例と順番の重要性
日本語フォントを指定する場合、表示される環境（Windows、macOS、Android、iOSなど）によって搭載されているフォントが異なります。そのため、複数の日本語フォントを優先順位をつけて指定することが重要です。
body {
font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}この記述の順番には下記の意味があります。
- Noto Sans JP：Google Fontsの日本語Webフォント。Web上から読み込んで使います。モダンで読みやすく、デザイン性も高いため最初に指定します。
- Yu Gothic（游ゴシック）：Windows 8以降のPCに標準で搭載されているフォント。
- Hiragino Kaku Gothic ProN（ヒラギノ角ゴ）：Macでよく使われている日本語フォント。高品質な印象。
- Meiryo（メイリオ）：Windows Vista以降の日本語フォント。太さや文字のバランスが良く、読みやすい。
- sans-serif：これらのフォントがどれも使えないときの最後の選択肢。ゴシック体風の文字で表示されます。
このように、Webフォント → OS標準フォント（Windows/Mac） → 総称フォントの順番で指定することで、どんな端末でも見た目が崩れにくくなります。
総称ファミリー（serif、sans-serif、monospaceなど）の使い分けテクニック
font-familyでは、特定のフォント名だけでなく、総称ファミリー（Generic Family）を使うことが重要です。総称ファミリーは、特定のフォントが使えない場合に、代替のフォントスタイルを指定するために使用します。
代表的な総称ファミリーは以下の通りです。
| 総称ファミリー | 特徴 |
|---|---|
| serif | 明朝体のような飾り付きフォント |
| sans-serif | ゴシック体のような飾りなしフォント |
| monospace | 等幅フォント。コード表示などに使う |
| cursive | 手書き風の文字。装飾的で読みやすさは落ちる場合も |
| fantasy | デコラティブなデザイン文字。見出しなど一部用途向け |
これらを使うことで、指定したフォントが利用できない場合でも、似たようなデザインを表示できます。
▼なぜ総称ファミリーが必要なの？
ブラウザやOSごとに使えるフォントが異なるため、総称ファミリーを指定しておくと、指定したフォントが利用できない場合でも、代替のフォントが表示され、デザインの崩れを防ぐことができます。
Webフォントとローカルフォントの違い
ローカルフォントは、ユーザーのデバイスにインストールされているフォントを指します。つまり、ユーザーが使用するパソコンやスマートフォンの環境によって、表示されるフォントが異なるため、同じWebページでも端末によって見え方が変わることがあります。
一方、Webフォントを使用することで、外部からフォントを読み込むことができ、どの端末でも同じフォントデザインで表示できます。これにより、Webサイトのデザインが統一され、見た目の一貫性が保たれます。
▼Webフォントとローカルフォントの違い
- ローカルフォント：閲覧者のパソコンやスマホにインストールされているフォントを使う。ユーザーの環境によって見え方が変わることがある。
- Webフォント：インターネットを通じて外部のフォントファイルを読み込んで表示する。 どの端末でも同じフォントを表示できる。
▼Webフォントの種類
- Google Fonts（無料／商用利用可／設定が簡単）
- Adobe Fonts（Adobe Creative Cloudユーザー向け）
- TypeSquare、FONTPLUS（有料フォント配信サービス）
モバイル対応のフォント指定（iOS / Android差異に配慮）
スマートフォンでは、OSごとに標準搭載されているフォントが異なります。これにより、表示がズレたり印象が変わることがあるため、iOSとAndroid両方でバランスよく表示されるよう、よく使われるフォントを組み合わせて指定することが推奨されます。
▼iOSとAndroidの主な日本語フォント
- iOS（iPhone・iPad）：「Hiragino Sans」や「Hiragino Kaku Gothic ProN」
- Android：「Noto Sans CJK JP」や「Roboto」
▼推奨される指定例（日本語サイト向け）
body {
font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}このように、主要なデバイスで広くサポートされているフォントを順に並べることで、ユーザーのOSに応じた最適なフォントが適用されやすくなります。
▼レスポンシブ対応やfont-sizeの単位選びについてはこちら
まとめ
Webフォントを使うことで、Webサイトのデザインをより魅力的に、そして一貫性を保ちながら表示できます。今回紹介した基本的なCSSの使い方やフォント指定のコツを覚えて、あなたのWebサイトに最適なフォントを選びましょう。これで、どの端末でもおしゃれで読みやすいWebサイトを実現できます。
