1. TOP
  2. html&CSS入門
  3. 書体を変える「font-family」(フォントファミリー)の使い方

書体を変える「font-family」(フォントファミリー)の使い方

文章の書体を変えるには、「font-famiy」プロパティを使います。

書体のことをフォントと呼び、同じフォントの中でも様々な太さや、イタリックをセットにしたものをフォントファミリーと呼んでいます。

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

font-familyを何も指定しなければ、ブラウザの初期値が適用されます。
初期値はブラウザごとに違うので、意図した見た目にするためにも指定しておいたほうがよいでしょう。

font-familyの使い方

フォントファミリーの指定は下記のように書きます。

.demo01{
    font-family: serif;
}

値にはフォントファミリーの名前を指定します。

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

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

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

フォント名にスペースがある場合は、ダブルクォーテーション(” “)、もしくはシングルクォーテーション(‘ ‘)で囲みます。

囲わなければ適用されないので注意しましょう。スペースが入っていなければ囲う必要はありません。

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

複数のフォントを指定

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

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

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

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

左から順に優先度の高いものを書いていこう

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

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

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

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

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

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

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

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

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

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

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

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

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

フォントを指定する順番にもポイントがあります。

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

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

font-familyのケーススタディ

ウェブページ全体のフォントを指定したい場合

ウェブページ全体のフォントを変更したい場合は、body要素にスタイルをて適用します。

font-familyは何も指定しなければ、親要素のものが継承されので、bodyタグにだけ書いておけば、全ての子要素に同じフォントが適用されます。

body{
    font-family: serif;
}

font-familyのオススメの書き方

いろんな指定の仕方がありますが、現実的に読みやすくてユーザーが見慣れているフォントを使おうと思うと、ある程度限られてきます。
そこで、ここでは、これを指定しておけばまず間違いないだろうと思われる値を紹介します。

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

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

游ゴシックは新しいフォント

游ゴシックは、windowsとMAC両方に搭載されている比較的新しいフォントです。

今までは別々だったフォントを表示するしかありませんでしたが、游ゴシックを使うことにより、windowsとMACで共通のフォントを使うことができるようになりました。

しかし、游ゴシックには色々な問題があり、指定するのはひと工夫必要です。

游ゴシックはwindowsとMACで名前が違う

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

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

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

つまり游ゴシックは4種類指定する必要があります。

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