フォントを指定する方法！CSSのfont-familyの使い方

この記事ではフォントの変更方法について解説します。

ラムネ

フォントとは文章の書体のことです。フォントの種類によってかなり見た目の印象が変わりますよ

この解説のゴールは以下を目指しています。

• フォントの変更方法を理解できる
• 自分のサイトのフォントを指定することができる

フォントを指定する方法

フォントを指定するには、font-famiyプロパティを使います。

くま

フォントファミリー？？ファミリーってなんだ？

ラムネ

基本的にフォントは太さなどが違う数種類が集まってセットになっているんだ！それらをまとめてフォントファミリーって呼ぶんだよ。

フォントファミリーというのは、同じフォントでも、太さやちょっとした形の違いで数種類用意されており、それらをセットにしたものをフォントファミリーと呼びます。

「メイリオ」や「ヒラギノ角ゴ」なども実は様々な太さや斜体をまとめたフォントファミリーです。

font-familyの使い方

フォントの指定は下記のように記述します。

font-family: フォントファミリー名;

例えばウェブページ全体のフォントを変更したい場合は下記のように記述します。

body{
    font-family: serif;
}

一見シンプルに見えますが、font-familyにはいくつかのポイントがあるので、解説していきます。

フォントファミリー名を正しく指定する

font-familyの値には、フォントファミリーの名前を一字一句間違いなく指定します。

フォント名にスペースがある場合は、ダブルクォーテーション(” “)、もしくはシングルクォーテーション(‘ ‘)で囲みます。スペースが入っていなければ囲う必要はありません。

例えば有名なフォントファミリーの場合は下記のようになります。

• ’Times New Roman’(スペースがあるのでクォーテーションで囲う)
• ’MS ゴシック’(スペースがあるのでクォーテーションで囲う)
• arial (スペースがないのでクォーテーション無し)
• serif (スペースがないのでクォーテーション無し)

複数のフォントを指定する

フォントファミリーは複数指定するのが普通です。

というのも、CSSでフォントファミリーを指定しても、そのフォントがユーザーのPCやスマホに入っていなければ、別のフォントに置き換えられてしまうからです。

どんなフォントが入っているかは、ユーザーのOSやデバイスによって変わってくるので、一つの指定だけだと対応しきれないんですね。

ですので、windows向け、mac向け、iphone向け、andoroid向け、などに対応するために複数指定するようにします。

左から順に優先度の高いものを書く

CSSの仕様として、font-familyは左から順に分析して、一番最初にマッチしたフォントを表示します。

ですので、一番左に一番優先度の高いフォントを指定するようにしましょう。

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

フォントファミリーの最後には、総称フォントファミリー名を書くようにします。

総称フォントファミリーというのは、個別のフォント名ではなく、「ゴシック系」や「明朝系」といったフォントのタイプを指定するものです。

くま

なんで総称フォントファミリーが必要なんだ？

ラムネ

念には念を入れて、て感じかな。指定したフォントが1つも入ってない場合に備えて系統だけでも指定しておくんだ

複数指定したフォントファミリーが、ユーザーの環境に一つも無かった時に、せめて系統だけは意図したものにするために使います。

世の中にはいろんなデバイスがあるので、保険として総称フォントファミリーを指定しておくことで、おおざっぱではありますがフォントの系統をコントロールすることができます。

総称フォントファミリーの種類

総称フォントファミリーは以下の5つ用意されています。

• sans-serif：ゴシック系のフォント
• serif：明朝系のフォント
• cursive：筆記体・草書体のフォント
• fantasy：装飾的なフォント
• monospace：等幅フォント

※キーワードはクォーテーションで囲う必要はありません。

上記のうち基本的に使うのは、ゴシック系を示す「sans-serif」か明朝系を示す「serif」です。他の3つを使うことはほとんど無いので、2種類は確実に使えるようにしておきましょう。

欧文フォント(英語のフォント)は左で指定する

フォントを指定する順番にもポイントがあります。それは欧文フォント(英語に適用させたいフォント)は優先度の高い左側に記述するということです。

なぜなら日本語フォントを左に書いてしまうと、日本語フォントの多くはアルファベットも表示できるため、欧文フォントの出番がなくなってしまうためです。

欧文フォントを左に書いておけば、アルファベットは欧文フォント、日本語部分は日本語フォントで表示することができます。

おすすめのフォント

いろんな指定の仕方がありますが、現実的に読みやすくてユーザーが見慣れているフォントを使おうと思うと、ある程度限られてきます。

ここではこれを指定しておけばまず間違いないだろうと思われる値を紹介します。

font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif

游ゴシックを主体とした指定の仕方です。「游ゴシック＞メイリオ＞その他ゴシック体」という優先順位で指定しています。

なぜ遊ゴシックにしているのかというと、windowsとmacに共通で搭載されているフォントだからです。

ポイント

WEB製作者はお分かりになると思いますが、実はwindowsとmacでは搭載されているフォントが全然違うため、見た目も大きく変わってしまうという問題がありました。

遊ゴシックは新しめのフォントで、windowsとmacに共通で搭載されている貴重なフォントです。

遊ゴシックが登場してからは同じフォントを表示させることができるため、このフォントを採用するサイトが増えて来ています。

游ゴシックを指定する際の注意点

windowsとMACでは游ゴシックをfont-familyで指定するときの名前が違います。ややこしいですが両方の名前を指定しないといけないので注意しましょう。

• windows…”游ゴシック”または、 “Yu Gothic”
• MAC… “游ゴシック体”または、YuGothic,

英語版のフォント名と日本語名版のフォント名がありますが、OSのバージョンによって動く・動かないがあるので、全種類指定します。

つまりwindowsとmacのことを考えると、游ゴシックは４種類全ての名前で指定する必要があります。

ラムネ

なんとか話し合ってフォントファミリー名統一できなかったのか？と思ってしまいますね…

windowsだと細くて読みづらい

遊ゴシックは、細字、標準、太字といろんな太さが用意されたフォントファミリーです。

游ゴシックを指定すると、MACでは標準の太さが選ばれますが、windowsでは細字が選ばれるという仕様があります。

游ゴシックは美しいフォントですが、細字だとちょっと読みづらいので、windowsでは細字を選ばないように「”游ゴシック Medium”, “Yu Gothic Medium”」という游ゴシックの中でも標準の太さになるフォントを指定します。

ただし、古いWindowsでは「”游ゴシック Medium”, “Yu Gothic Medium”」という指定が反映されないので、その場合は細くなっても致し方ないとして「”游ゴシック”, “Yu Gothic”」も指定しておきます。

まとめると、

• MAC向けに「”游ゴシック体”, YuGothic」
• Windows向けに「”游ゴシック Medium”, “Yu Gothic Medium”」
• 古いWindows向けに「”游ゴシック”, “Yu Gothic”」
• 游ゴシックがないWindows向けに「メイリオ」

という指定になり、繰り返しになりますが、下記のようなフォントの指定がオススメです。

font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif

ラムネ

これをもとに、英語のフォントを変えたい人は、左側に追加するなどしてカスタマイズしていけば良いかと思いマす。

まとめ

• フォントを指定するには「font-famiy」プロパティを使う
• 同じフォントの中でも様々な太さや、イタリックをセットにしたものをフォントファミリーと呼ぶ
• フォントファミリーは複数指定する
• 左から順に優先度の高いものを指定する
• 最後に総称フォントファミリー名を指定する
• 欧文フォント(英語のフォント)は左で指定する