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

記事内に商品プロモーションが含まれる場合があります

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

font-familyの書き方

CSSでは文字（フォント）の種類を、font-familyというプロパティにより決めます（参考：プロパティとは？）。

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

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

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

フォントは基本的に複数の種類を指定します。複数のフォントを指定するときはフォント同士の間を,で区切ります。スペースは入れても入れなくてもどちらでもOKです。

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

なぜ複数書くのかというと、OSによって入っているフォントが異なるからです。言い換えると、Windowsなのか、Macなのか、iPhone/iPad（iOS）なのかで搭載されているフォントが異なるのです。Macにしか入っていないフォントを指定しても、Windowsパソコンからはそのフォントでウェブページを見ることはできません。そこで複数のフォントを書いて対応します。MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバーするというイメージですね。

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

複数のフォントのうち、前に書かれたものから優先的に適用されます。上の図の場合、ウェブページを開いたブラウザはまずAvenirを使おうとします。もしAvenirがパソコンやスマホに入ってなければ、次のCorbelを使おうとします。このように前に書かれたフォントから適用としようとしてくれるのです。

英語フォントを前に書く

英語だけを表示できる「英語フォント」と、英語＋日本語を表示できる「日本語フォント」があります。font-familyを書くときは、英語フォントは前に並べるようにしましょう。そうすることでアルファベットには英語フォントで、日本語の文字には日本語フォントが使われるようになります。

上の図のように英語フォントを前に書いておくと、アルファベットには英語フォントが適用され、日本語文字には前に書かれた日本語フォントから優先的に適用されます（もしアルファベットも日本語フォントで表示したいという場合は、日本語フォントを前に書けばOKです）。

間に半角スペースの入るフォント名は「’」ではさむ

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

間に半角スペースが入るフォント名はクオテーション'ではさみます（でないと適用されません）。’Times New Roman’や’MS ゴシック’もそうですね。

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

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

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

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

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

総称フォントファミリーには5種類あります。たとえば「sans-serif」と書いておくとゴシック体系のフォント、「serif」と書いておくと明朝体系のフォントをブラウザが表示してくれます。

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

例えばGoogleChromeで各総称フォントを表示してみるとこのようになります。「cursive」と「fantasy」は「sans-serif」と同じ表示になってしまうようです。

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

ほぼ全てのウェブサイトが総称フォントファミリーとして「sans-serif」と「serif」のどちらかを指定しています（ほとんどがsans-serif）。ゴシック体系のフォントを使いたいのであれば「sans-serif」を、明朝体系のフォントを使いたいのであれば「serif」を指定すると良いでしょう。

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

基本的にfont-familyはウェブページ全体の文字に対してまとめて適用します（その方が楽ですね）。全体に対して指定するときには、以下のようにbodyをセレクタとして書きます。

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

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

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

読みやすさも考慮したうえでそこそこオシャレなfont-familyを考えてみました。MacでもWindowsでもiPhoneでもきれいに表示されるはずです。こだわりが無い方はぜひコピペして使ってみてください。

おすすめのフォント

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

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

あまりまとまっているところがないと感じたので「Font-familyメーカー」なるものを作りました。

Font-familyメーカーWindows、Mac、iPhoneの標準フォント（はじめからインストールされているフォント）を一覧でまとめています。これを使えば、各環境にどのフォントが対応しているのかを見ながらフォント選びをすることができます。使い方は後でくわしく説明します。

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

Androidのスマホやタブレット向けに共通して指定できるフォントは基本的に以下の2種類です。どちらも無難なゴシック体フォントです。

Droid Sans
Roboto

Androidではフォント指定なしのときに使用されるフォントは端末によって異なります（この2つのどちらかでない場合があります）。個人的にはAndroid向けに指定する必要は特にないと思っていますが、指定なしだとどんなフォントで表示されるかは分かりません。もし統一しておきたいのであれば、font-familyにRoboto,'Droid Sans'を追加しておくと良いでしょう。そうすればどちらかのフォントを使って表示してくれます。

font-familyを書くときのコツ

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

次のことに気をつける！

優先的に使ってほしいフォントを前に書く
はじめに英語フォント、次に日本語フォントを指定する（アルファベットだけ英語フォントで表示されるように）
Windows、Mac、iPhoneの3環境をカバーするように複数のフォントを書く
Android向けはとりわけ考える必要はないが、Roboto,'Droid Sans'を書いておくと安心
間に半角スペースの入るフォント名はクオテーション（'もしくは"）
ではさむ

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

ウェブフォントとは、サーバー上に置かれているフォントを読み込んで表示させる仕組みのことです。どのパソコン、タブレット、スマホでも共通して同じフォントを表示させることができます。閲覧する端末にインストールされていないフォントでも表示させることができるのです。これを使うことでフォントの選択肢がグッと増えます。詳しくは以下の記事を読んでみてください。

【2019年版】Google Fontsの使い方：初心者向けに解説！

2. Font-familyメーカーの使い方

「CSSのフォントの指定方法がよく分からない」という方は、はじめに「font-familyの書き方」を読むことをおすすめします。

「font-familyの書き方」へ飛ぶ

Font-familyメーカーとは？

Font-familyメーカー

ややこしいfont-familyを簡単に作成できるサービスです。自分でフォント名を打ち込む必要は一切ありません。使いたいフォントをドラッグしていくだけでfont-familyが完成します。

手順1. 標準フォント一覧から使いたいフォントを選ぶ

画面の中心には①Windows ②Mac ③iPhone/iPadの3つの列が並んでいます。それぞれの列には各環境の標準搭載フォントが並んでいます。

Androidは？と疑問に思った方はこちらをご覧ください。上の方には日本語フォントが並び、下にスクロールしていくと英語フォントが出てきます。英語フォントはアルファベット順で並んでいます。

それぞれの列は個別にスクロールすることができます。この中から使いたいフォントを探します。

各フォント情報の見方

各フォントの枠にはさまざまな情報が載っています。

日本語：日本語フォントの場合に表示されます。英語フォントの場合にはこの部分には何も表示されません。
フォント例1：実際にfont-familyが指定されたテキストが載っています。閲覧しているPCやスマホに該当のフォントがインストールされていないと別のフォントで表示されてしまうことにご注意ください。
フォント例2：フォントの表示例の画像を載せています。該当のフォントがインストールされていなくても見ることができます（信頼できるのはこちらの例の方です）。
対応OS、バージョン：どの環境に標準搭載されているかを示しています。Windows：　Mac: 　iPhone：また、比較的最近搭載されるようになったフォントの場合、どのバージョンから対応なのかが載っています。