Webデザインにとってタイポグラフィによる表現はサイトのイメージにかかわる非常に重要な要素です。Webページのコンテンツの大半はテキスト情報であり、フォントの選択によってサイトのイメージが変わるだけでなく、指定したフォントによってはコンテンツが読み易くも、読み難くもなってしまいます。

フォントが指定されなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。大半のブラウザのデフォルトフォントは、ゴシック体ですが、macOSとiOS（iPhone、iPad）の標準ブラウザSafariはデフォルトフォントが明朝体になっています。また、今後のOSやブラウザのバージョンアップによって、標準インストールフォントや、デフォルトフォントが変更になる可能性もあります。意図した見え方や読み易さを考慮するならば必ずフォントを指定しておくようにしましょう。

font-familyの書き方定

ウェブページでは文字の種類（フォント）は、「font-family」プロパティにより変更することができます。font-familyプロパティの値には表示したい「フォント名」か、フォントのタイプを指定する「総称フォント名」のいづれかを指定します。

次のコードは、p要素のフォントの種類に「Arial」を指定しています。

p {
    font-family: 'Arial', sans-serif;
}

フォント名は「”」か「’」で囲む

フォントの種類はフォント名を記述しますが、フォント名が日本語であったり名前に半角スペースがある場合は「‘（シングルクオーテーション）」か「“（ダブルクオーテーション）」の引用符で囲む必要があります。

「’」でも「”」でもどちらを使っても構いません。また、間に半角スペースの入っていないフォントをクオテーションで囲っても問題ありません。

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

ユーザーに意図したフォントで閲覧してもらうために注意が必要です。font-familyプロパティで指定したフォントを表示させるためには閲覧ユーザーのコンピュータに指定フォントがインストールされている必要があります。

コンピュータや端末などのマシンにインストールされているフォントを「デバイスフォント」といいます。このデバイスフォントはユーザー側の閲覧環境に依存します。PCや携帯端末、あるいはOSによってインストールされているフォントが異なり、指定したフォントがユーザーのパソコンやスマートフォンに入っていなければ、font-familyプロパティで指定したフォントで表示されず、代替フォントで表示されてしまいます。

閲覧ユーザーの環境に該当のフォントがなかった場合を想定して、あらかじめ表示させる複数の候補を指定しておく必要があるのです。

そのことから、font-familyプロパティではフォントは基本的に複数の種類を指定しておきます。複数のフォントを指定するときはフォントを「,（カンマ）」で区切って記述します。

複数のフォントを指定すると先頭のフォントから読み込まれます。もしそのフォントがない場合、次に指定されているフォントへの読み込みへと移ります。

Note

font-familyプロパティで指定できるフォントの種類には「どこからフォントファイルを読み込むか」で大きく2種類に分けられます。コンピュータや端末などのマシンにインストールされているフォント「デバイスフォント」と、Webサーバーやクラウド、ホスティングサーバー等に置かれたフォント「Webフォント」です。

Webフォントはユーザーはサーバー上のフォントファイルを参照するため、ユーザーが使用しているデバイス種類やOSに依存せず共通のフォントを表示できるため、製作者の意図するデザインで閲覧してもらうことができます。

フォント名は優先的に適用したい順に指定する

複数指定されたフォントでは、前に書かれたものから優先的に適用されます。もしユーザーの端末に、指定したフォントが入っていなければ、次の指定フォント、無ければまた次の指定フォントというように、ブラウザはフォントを探します。

欧文（英語）フォントを先に指定する

英語だけを表示できる「欧文（英語）フォント」と、英語も日本語を表示できる「日本語フォント」がありますが、font-familyプロパティを指定するときに英語フォント先に指定することで半角英数文字には欧文（英語）フォントで、日本語の文字には日本語フォントを適用させることができます。

総称ファミリフォントの指定

font-familyプロパティの一番最後には「総称フォント」名と呼ばれるものを指定します。総称フォントファミリーとは端末に指定した全てのフォントが全く入っていなかった場合に、適用したいフォントタイプ（ゴシック体や明朝体など）を指定しておくためのものです。

フォント指定の最後には必ず総称ファミリフォントを指定します。総称ファミリフォントは、指定した全てのフォントがインストールされていなかった場合に使用されるキーワードで、これを指定しておけばWindowsでもMacでもどのタイプのフォントを表示したいかを指定しておくことでWebページを表示する際にブラウザのデフォルト指定のフォントが表示されてしまうのを防げます。

総称ファミリフォントは、以下の5種類の中から指定できます。

通常のフォント名のように、総称フォント名は引用符では囲んではいけません。もし引用符で囲ってしまうと、フォントファミリー名として認識してしまい、総称フォント名として正しく機能しません。

Note

日本語フォント・欧文フォント、またフォント名にスペースを含む・含まずを問わず、指定のフォントフと総称フォントを人が見て簡単に区別がつくように、「’」または「”」の引用符で囲うことが推奨されています。

Webページ全体のフォントを指定する

Webページ全体のフォントを指定するには、bodyをセレクタとして設定します。ほとんどのWebサイトでは、Webページ全体に指定する総称フォントファミリーとして「sans-serif」か「serif」のどちらかを指定しているのが一般的です。

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