WEB Tips デザイン・コーディング

いつも迷うfont-familyの指定。CSS font-familyフォント指定の基礎知識

2015-04-15

本記事にはプロモーションが含まれています。

いつも迷うfont-familyの指定。CSS font-familyフォント指定の基礎知識

ホームページを制作するときに悩むことが多いのがフォントファミリーの指定方法。ウェブフォントが使われる機会も多くなって、ウェブサイトのフォント表現の幅も広がりました。

使われるフォントも時代によってトレンドがあったり、OSやブラウザのバージョンアップによって使われるフォントも変わったりします。

この記事ではサイトのfont-familyについて最新状況を改めて調べてみてまとめました。

font-familyの書き方

CSSでフォントファミリーを指定するには、font-familyプロパティを使います。

body{
 font-family: 'Hiragino Kaku Gothic ProN W3', Meiryo, Arial, Helvetica, sans-serif;
}

font-familyを記述する上でポイントになる点を挙げています。

font-familyの書き方まとめ

  • font-familyにはフォントファミリー名(Arial,メイリオなど)か総称フォントファミリー名(sans-serif,serif)を指定する。
  • フォントファミリー名に空白スペースを含むフォントファミリーは、引用符('")で囲む。
    例)'Hiragino Kaku Gothic ProN W3', 'Luchida Grande'
  • 総称フォントファミリーは引用符で囲まない。
  • ブラウザは最初に指定したフォントから順に探して利用可能なものを選ぶ。
  • つまり、前に書いたフォントの方が優先順位が高い。
  • 利用可能なフォントがない場合は、ブラウザのデフォルトのフォントが適用される。
  • 英語表記やアルファベットには欧文フォントを使いたい場合は、日本語フォントよりも前に記述する。
  • 日本語フォントを日本語名と英語名で併記していたけれど、現在は英語名の指定だけで問題ない。

ポイントになる点を挙げて説明を加えていきたいと思います。

font-familyにはフォントファミリー名か総称フォントファミリー名を指定する

「フォントファミリー」は、同じ書体デザインを持つフォントのグループのことを指します。

よく使われるフォントファミリー

  • 游ゴシック(Yu Gothic)
  • メイリオ(Meiryo)
  • Hiragino Sans
  • Hiragino Kaku Gothic ProN
  • MS ゴシック(MS Gothic)
  • MS 明朝(MS Mincho)
  • ヒラギノ明朝(Hiragino Mincho)
  • Osaka
  • Arial
  • Helvetica
  • Times New Roman
  • Georgia
  • Verdana
  • Courier New
  • Open Sans
  • Roboto

総称フォントファミリー」は異なる書体デザインを持つフォントのグループを指します。指定したフォントがなかった場合に代替手段として使われます。一般的にフォントファミリー名の一番最後に記述します。

全てではないですが、よく使うと思われる総称フォントファミリーは以下のようになります。

総称フォントファミリー特徴・フォント例
serif明朝体
Times New Roman, Georgia, Palatino, Century
sans-serifゴシック体
Arial, Helvetica, Verdana, Futura, Gill Sans
monospace等幅フォント
Courier New, Consolas, Lucida Console, Monaco
cursive筆記体
Comic Sans MS, Brush Script, Lucida Handwriting
system-uiシステムの既定のUIフォント
WindowsはSegoe UI、MacはSan Franciscoなど
使う機会の多い総称フォントファミリー

font-familyの優先順位

 ブラウザは指定したフォントファミリーの最初に記述しているものから利用可能かを判断していきます。

font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

上記の場合、まず「メイリオ」がインストールされていれば「メイリオ」が適用されます。
「メイリオ」がなかった場合は「Hiragino Kaku Gothic ProN(ヒラギノ角ゴシック ProN)」が利用可能かを判断し可能であればヒラギノ角ゴシックが適用されます。

前から順に利用可能なフォントを判断していき、どれも利用できない場合は、「sans-serif」が適用されます。

日本語フォントを日本語名と英語名で併記する必要はあるの?

以前は日本語フォントをfont-family に指定するとき、日本語名と英語名を両方記載していました。

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN";

Firefoxの古いバージョンでは日本語でフォントファミリーを指定すると正しく解釈されないため、両方記述していたものです。

現在のモダンブラウザであれば英語名称だけの記述で問題ないようです。

游書体(游ゴシック、游明朝)について

Windows8.1やOSX Mervericks から標準フォントとしてインストールされている。読みやすくてきれいなフォントなので、ウェイブサイトのフォントとして採用しているサイトも多いです。

body {
  /* 游ゴシックの例 */
  font-family: "Yu Gothic", "YuGothic", sans-serif;

  /* 游明朝の例 */
  font-family: "Yu Mincho", "YuMincho", serif;
}

游ゴシックをウェブサイトで使用する時には、OSによってフォントの名称が微妙に違ったり、Windowsではかすれて見えたりと注意する点があります。

ウェブサイトで游ゴシックを使う時に注意する点を以下の記事でまとめています。>> ウェブサイトで游ゴシック Yu Gothicを使う時に注意すること

ウェブサイトで游ゴシック Yu Gothicを使う時に注意すること

游ゴシック体(ゆうゴシック)は、Mac(OSX Marverics以降)、Windows(8.1以降)でもインストールされているため、ウェブサイトでfont familyに設定すればMacやWindo ...

続きを見る

Mac,Windows両方に標準インストールされているフォントは?

WindowでもMacでもサイトの見え方を同じに近づけたい場合は、Windows、Mac両方にインストールされているシステムフォントを指定するのがオススメですね。(欧文に限りますが^^;)

ゴシック体
Arial, Arial Black, Comic Sans, Courier, Courier New, Impact, Trebuchet, Verdana

明朝体
Georgia, Times New Roman

※バージョンによって異なる場合があります。

スマホでのフォント環境

iOS, macOSではSan Francisco

iOS, macOSのシステムフォントは現在San Franciscoが使われています。

正確には、欧文システムフォントに「San Francisco」、和文システムフォントには「ヒラギノ角ゴシック(Hiragino Sans)」が使われています。San Franciscoフォントを使いたい場合、名前をそのまま記述しても効きません。

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

このように記述するとSan Franciscoフォントが使えます。

しかし上記の指定の場合、将来的にブラウザで割り当てられるフォントが変更になる可能性があるということを想定しておく必要がありそうです。(ics.mediaさんの記事より)

AppleデベロッパーサイトからSan Franciscoフォントをダウンロードすることできます。
https://developer.apple.com/fonts/

AndroidはRobotoとDroid Sans

Androidの場合機種メーカーによって採用しているフォントは多岐に渡るため、全て対応することは難しいの現状です。

システムフォントは、欧文フォントには「Roboto」、和文フォントにはNoto Sans CJK JPが使われています。アンドロイドを意識する場合は指定しておくといいでしょう。

使いやすいと思われるfont-family指定

ゴシック体

font-family: Verdana, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;

明朝体

font-family: "Times New Roman", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;

Webフォントを使う場合

Webフォントを使うメリットはやはりOSやデバイスで差異なくフォントが表示される点でしょう。ただし日本語Webフォントはサイズが大きいため、ウェブサイトのパフォーマンスに影響を与える可能性があるということは留意しておく点です。

Googleフォント

Noto Sans Japanese
Googleが開発したオープンソースのフォントファミリー、可読性が高いゴシック体

font-family:"Noto Sans JP", "Helvetica Neue", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;

M PLUS Rounded 1c
丸みがあって可愛い丸ゴシック体

font-family: 'M PLUS Rounded 1c', sans-serif;

Googleフォントについてはこちらの記事で詳しくまとめています。>>Helvetica,Futura,DINなど有名フォントの代わりになる?おすすめGoogleフォント

Helvetica,Futura,DINなど有名フォントの代わりになる?おすすめGoogleフォント

前回に引き続きGoogleフォントについてです。 HelveticaやFutura、DINなどの有名フォントをWebフォントとして使いたい時、有料だったりするのでなかなか手が出しずらいですよね。 そん ...

続きを見る

Adobe Fonts

Adobeフォントにも日本語ウェブフォントが多くあります。(有料の場合あり)

NEWS

2023年4月よりAdobe Fontsで「ヒラギノ明朝 ProN」「ヒラギノ角ゴProN」が利用できるようになりました。

Macではお馴染みのヒラギノフォントですが、Adobeフォントを利用すればWebフォントとして利用可能です。(Adobe Creative Cloud有料サブスクリプション契約で利用可能)

Adobeフォントの使い方はこちらの記事で解説しています。商用利用,WebフォントOK 無料でも使えるAdobe Fontsの使い方

商用利用,WebフォントOK 無料でも使えるAdobe Fontsの使い方

Adobe Fontsは、無料で登録するだけで利用でき、Webフォントも使えるサービスです。 普通、Adobeはプロ向けの高価なソフトというイメージがありますが、Adobe Fontsは実は無料会員で ...

続きを見る

IEでのHelveticaバグ

Helveticaを先頭に記述しているとIE9,IE10で表示されないバグというのがあるとのことです。

解決方法は、Helveticaを先頭にしないことだそうです。

font-family: 'Arial', 'Helvetica', sans-serif;

IEを考慮することは無くなりましたが、参考情報として残しておきたいと思います。

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-,