どのWebサイトでも、必ずCSSで「font familyプロパティ」を設定します。

そこまでこだわりがない場合や、知識がない場合にはコピペや同じ設定の使いまわしをしている方も多いでしょう。

しかし、「font familyって本当にこの使い方で合ってるの？」とふと思うこともありますよね？

そこで今回は、font familyの正しい指定方法を解説します！

今回の記事でわかる内容は以下の通りです。

font familyプロパティが聞かない時の原因と対策や、Webサイト制作に使えるおすすめのfont familyの値も紹介します。

初心者の方だけでなく、Web制作をすでに仕事にしている人にとっても役に立つ内容になっていますよ！

font familyとは

まずはfont familyプロパティの役割や指定する場所など、基本的な知識をおさえておきましょう。

ここでは、以下の内容を詳しく解説していきます。

font familyプロパティの基礎を理解しておくことで、新しいフォントを利用したいと思った時にも臨機応変に対応できるようになるので、しっかり確認しておきましょう。

font familyの基本的な指定方法

font familyプロパティには、基本的に以下のように記述します。

font-family: "フォントファミリー名", 総称フォント名;

font familyを指定する場所

font familyプロパティは、Webサイト全体のフォントを指定するbodyに指定するのが一般的です。

/* サイト全体のフォント指定 */
body {
font-family: "MS Pゴシック", sans-serif;
}

しかし、見出しや強調させたいテキストなどに特定のフォントを指定したい場合は、h1やクラス名などに指定することも可能です。

/* h1見出しのフォント指定 */
h1 {
font-family: "Hiragino Kaku Gothic ProN" ;
}

/* pタグのクラス名にフォント指定 */
p text {
font-family: "メイリオ" ;
}

ただし、使用するフォントの種類が複数あると、ユーザーがどこをみれば良いのかわからなくなってしまいます。

などの対策を考慮すると、ユーザービリティが高まります。

font familyに指定できる値は主に2種類

font familyプロパティに指定できる値は、大きく分けて以下の2種類。

それぞれの種類ごとに、値の記述方法や表示されるデバイスやOSによって異なりますので、しっかり覚えておきましょう。

では、詳しく解説していきます。

1.フォントファミリー名

フォントファミリー名とは、具体的な名称のこと。

「メイリオ」や「MSゴシック」のような日本語フォントから、「Arial」や「Century」などの欧米フォントが含まれます。

フォントファミリー名は、以下のように指定します。

body {
font-family: "Arial";
}

body {
font-family: "メイリオ";
}

フォントファミリー名を記述するルールや、特徴についても理解しておきましょう。

OSによって表示が異なるので、基本的にはフォントファミリー名単体ではなく、後ほど紹介する「総称フォント名」と合わせて記述します。

また、フォントファミリー名は、「””（ダブルクオーテーション）」「”（シングルクォーテーション）」どちらかの引用符で囲うのが推奨されています。

最新のブラウザでは引用符で囲わなくとも機能しますが、フォント名の区切りがわかりやすくなり、総称フォント名と区別しやすくなるので、引用符を使用することをおすすめします。

2. 総称フォント名

総称フォントとは、フォントの大きなカテゴリーのこと。

「sans-serif（ゴシック体）」や「serif（明朝体）」などがあり、OSやブラウザで設定されているデフォルトのフォントファミリー名が自動で選ばれるように設定されます。

body {
font-family: sans-serif;
}

body {
font-family: serif;
}

総称フォント名の一部と、それぞれに適用されるフォントファミリー名は、以下の通りです。

フォントカテゴリー	総称フォント名	適用フォント例
ゴシック体	sans-serif	Arial、Century Gothic、メイリオ、ヒラギノ角ゴシックなど
明朝体	serif	Century、MS Serif、ヒラギノ明朝、MS P明朝など
等幅フォント	monospace	Courier、Terminal、ＭＳ ゴシック、ＭＳ 明朝など
装飾系フォント	fantasy	alba、Chickなど
筆記体	cursive	Comic Sans MS、Script、HGP行書体、HG正楷書体-PROなど

一般的には、「sans-serif」か「serif」のいずれかを指定します。

他の総称フォント名は、具体的なフォントが割り当てられないため、「sans-serif」か「serif」で指定するのがおすすめです。

なぜわざわざフォントを指定するのか？

HTMLで、マークアップされたタイトルや本文などは、人間が読めるテキストで表示されます。

しかし、閲覧するユーザー側のOSやデバイスによって、デフォルトで指定されているフォントが異なります。

そのため、「このHTMLページには○○というフォントで表示して」という設定ができる、font-familyプロパティを指定する必要があるのです。

しかし、OSやデバイスごとに、もともと備わっているフォントも異なります。

一つのフォントではなく、フォントファミリー名・総称フォント名を合わせて指定し、できる限り多くの環境に対応したフォントを指定しましょう。

迷ったらこれ！おすすめfont familyの指定を用途別で紹介

font familyを指定する時、「結局どのフォント名を使えばいいのかわからない！」と思った方も多いでしょう。

Webサイトにピッタリのフォントを一つ見つけても、各OSに対応できるフォントを選ぶなど、「いくつ指定すればいいのか」「どれを指定すればいいのか」迷ってしまいますよね？

そこで、ここではおすすめのfont familyの値を用途別でご紹介します！

2021年に最適なfont familyはこれ！

Webサイトのフォントは、デバイスの進化などの影響で、時代によって変化しています。

以前は表示されていたフォントが突然表示されなくなったり、指定したフォントとは別のフォントで代替え表示されてしまうこともあるので、常に最新のフォント情報をチェックしておきましょう！

2021年におすすめなfont familyの指定は、以下の通りです。

body {
  font-family: "Helvetica Neue",
    
Arial,
    
"Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

Webフォントなど、特殊なフォントではなく各OSやデバイスに備わっているフォントファミリー名・総称フォント名を採用しています。

それぞれの値を指定した理由は以下の通りです。

「游ゴシックは指定しないの？」と思った方も中にはいるでしょう。

Windows 8とOS X Mavericksで搭載された游書体は、Windows・macOSともに同じ書体を表示させることができます。

しかし、Windowsでは文字がかすれて表示されてしまうという問題があるため指定していません。

「Hiragino Sans」は、2019年10月に発生したmacOS CatalinaのChromeで、sans-serifを指定しているのに明朝体で表示されるという問題から選択しています。

Chrome 80がリリースされた2020年2月には問題は解決されましたが、古いヒラギノ角ゴシック指定が反映されない状態だったため、念のため「 Hiragino Sans 」を指定しているという訳です。

長文にも見出しにも何にでも合う「ゴシック系」

ゴシック系は、長文でもユーザーが読みやすいフォントなので、ブログサイトなどによく利用されています。

おすすめの指定方法は、以下の通りです。

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

以前は、ヒラギノと游ゴシックが主流とされていましたが、Windowsではかすれて表示されてしまうので、上記の指定が最適です。

長文などの文章だけでなく、タイトルや見出しなどにも使いやすいので、「どのフォントが自分のサイトに合うのかわからない」という場合にも使えますよ。

見出しや強調したいカ所にピッタリの「明朝体系」

明朝体系は、ユーザーの目を引き付けやすいフォントなので、タイトルや特に強調したいカ所などによく使用されています。

おすすめの指定方法は、以下の通りです。

body {
  font-family: "ヒラギノ明朝 Pro W3",
    "Hiragino Mincho Pro",
    "MS P明朝",
    "MS PMincho",
    serif;
}

明朝体系のフォントを使用しすぎると見づらくなってしまうので注意しましょう。

おしゃれなフォントを使いたい！そんな時にはWebフォントがおすすめ

近年、手書き風フォントやおしゃれな筆記体フォントなどを使用するWebサイトが増えてきています。

フォントファミリー名や総称フォント名などにはない、特殊なフォントは画像やWebフォントを使用している場合がほとんど。

Webフォントとは、ネットワーク上に特定のフォントデータをダウンロードし、どのデバイスでも同様に表示できるフォントのことです。

Webフォントは、以下のようなサイトからダウンロードし、無料で使用することが可能です。

・Google Fonts + 日本語

・M+ FONTS

もっと詳しくWebフォントについて知りたい方は、以下の記事が参考になりますよ。

【CSS初心者】無料で使える！おしゃれ＆かわいいWebフォントおすすめ9選

Webフォントを使う時の注意点

どの環境下においてもフォントを統一表示することができるWebフォントは、画期的でデザインや保守の観点からもおすすめですが、容量が大きいという無視できない問題もあります。

使用カ所の多さに関わらず、Webフォント自体を読み込むのにGoogleの推奨容量である、1ページあたり1.6MBをすぐに超えてしまいます。

どうしてもデザインを重視したい場合や、Webフォントを使用するメリットの方が大きい場合は、高速化するために以下の手段を検討しましょう。

どの対策も専門的な知識が必要なので、初心者のうちは、通常のフォントを利用するのをおすすめします。

font familyを指定したのに効かないのはなぜ？

「font familyを指定したのに全く反映されない…」という問題に一度は直面したことがあるでしょう。

「1.フォントファミリー名」で解説した、記述ルールを破っている場合が主な原因です。

正式な固有名称で記述しているか、引用符や半角・全角スペースに誤りはないか等を確認しましょう。

また、記述内容に問題がない場合でも、OSやブラウザによって見え方は異なります。

ゴシック体や明朝体などの大きなカテゴリーは統一し、フォントファミリー名や総称フォント名などは、なるべく似ている見た目のフォントを指定しましょう。

font familyは無難な指定が安心！最新のフォント情報をチェックして使おう

今回は、font familyについての基礎知識やおすすめの指定方法などを解説しました。

以下は、この記事のまとめです。

フォントは、時代の変化によって変わることが大いにあり得ます。

今回ご紹介したおすすめの指定だけでなく、自分のサイトに合っているかどうか、最新の情報で変わったことはないか等を考慮して、最適なfont familyを指定してくださいね。