スタイルシートでは、文字列の表示に使うフォント名を指定できます。日本語用のフォントだとアルファベットの表示があまり美しくないことがあるため、英文を表示する箇所だけ欧文フォントを指定したいと思うこともよくあります。そんな場合には、スタイルシートで表示フォントを指定すると良いでしょう。

スタイルシートを使って、表示に使いたいフォント名を指定するのはとても簡単で、以下のようにfont-familyプロパティを使うだけです。

h1 {
   font-family: Verdana,Arial,sans-serif;
}

上記の場合は、見出し(h1要素)に対して、font-familyプロパティの値に3つの値を指定しています。この3つの値は、先頭から順に「Verdana」・「Arial」という2種類の欧文フォント名と、「sans-serif」という種類名です。このように指定すると、以下のような規則でフォントが選択されて表示に使われます。

1. 閲覧環境に「Verdana」フォントが存在するなら「Verdana」で表示されます。
2. 1がない場合は、2番目に指定した「Arial」フォントが存在すれば「Arial」で表示されます。
3. 2もない場合は、最後の「sans-serif」の種類名が採用され、閲覧者の環境に存在する「何らかのゴシック系フォント」で表示されます。

このように、font-familyプロパティには複数のフォント名を優先順にいくつでも列挙しておけます。どんなフォントがインストールされているかは閲覧環境によって異なるため、フォント指定の最後には必ず「sans-serif」のような「フォントの種類を示すキーワード」を書いておきましょう。

フォントの種類を示すキーワード

フォントの種類を示すキーワードには、次の5つがあります。

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

font-familyプロパティの値には、これらのキーワード1つだけを指定しても構いません。その場合は、具体的にどんなフォントが表示に使われるかは環境によって異なりますが、「ゴシック系で表示したい」などの大まかな希望通りにはなります。

※なお「fantasy」を指定すると、場合によっては文字ではないフォント(記号表示用や音符表示用などの特殊なフォント)が使われてしまう可能性もあるので、指定は避けておいた方が良い気がします。

フォント名に空白文字が含まれる場合の記述

フォントの中には名称に空白文字が含まれるものが多々あります。特に日本語フォントには多いです。例えば「ＭＳ Ｐゴシック」には、「ＭＳ」と「Ｐ」の間に半角スペースが1つあります。欧文フォントでも「Times New Roman」のように半角スペースが含まれるものがあります。このような「名称に空白が含まれるフォント名」を指定する場合には、フォント名全体を引用符で囲まなければなりません。例えば、以下のような感じで。

h2 {
   font-family: "ＭＳ Ｐゴシック", Osaka, sans-serif;
}
h3 {
   font-family: "Times New Roman", serif;
}

引用符は、ダブルクォーテーション記号でもシングルクォーテーション記号でも構いません。(もし、style属性の中にスタイルを記述する場合は、style属性の値全体を囲むのにダブルクォーテーション記号を使っているでしょうから、フォント名を囲む引用符はシングルクォーテーション記号しか使えません。)

なお、スペースを含まない名称であっても引用符で囲んで構いませんが、「sans-serif」や「monospace」のようなキーワードは「フォントの名称」ではないため引用符で囲んではいけません。ややこしいと思うなら、「スペースを含まないなら引用符は不要」と覚えておいても良いでしょう。

フォント名に含まれるアルファベットの全角・半角に注意

日本語フォントの場合は、フォント名に含まれるアルファベットの扱いにも注意が必要です。「ＭＳ Ｐゴシック」の場合、「ＭＳ」や「Ｐ」は「全角英字」です。半角英字で記述すると正しく解釈されません。

この辺はややこしいので、Microsoft Wordやワードパッドなどのワープロソフトを起動して、フォント名の選択欄からフォント名をコピーして、CSSソースにペーストするような方法で記述する方が確実でしょう。

より綺麗に見えるフォントが存在しているのに使われなくなる問題も

何もフォントを指定しなかった場合にどのようなフォントが使われるかは閲覧環境によって異なります。表示するフォント名を指定していると、「それよりももっと望ましいフォントがあったとしても表示には使われない」という問題もあります。

例えば、Windows Vista以降には「メイリオ」という、従来のWindowsで標準だった「ＭＳ ゴシック」フォントよりも美しく見えるフォントが用意されています。しかし、例えば「ＭＳ Ｐゴシック」フォントが第1に使用されるようスタイルシートが記述されていれば、せっかくインストールされている「メイリオ」フォントは使われないことになってしまいます。

新しいバージョンのOSがリリースされるたびにフォントの情報を調べて、優先的に適用させたいフォント名を(font-familyプロパティの)先頭に加えていけるなら良いですが。そうでないのなら、「sans-serif」や「serif」・「monospace」などのキーワードだけを指定する方が良いかも知れません。

フォントの表示サンプル

最後に、表示サンプルを掲載しておきます。最初の5つは種類名のみを指定したものですから、どのようなフォントが使われるかは閲覧環境によって異なります。

上記のような感じで、フォント名をいろいろ指定可能です。

なお、CSS3からは「フォントファイルごとウェブ上からダウンロードさせて表示に使わせる」という『ウェブフォント』機能があります。この方法だと、(フォントファイルをブラウザにダウンロードさせるため)指定したフォントで必ず表示できるメリットがあります。(ただし、フォントファイルをダウンロードするのに時間がかかる可能性があるデメリットもありますが。)
ウェブフォントについては、All Aboutで「望みのフォントで表示できる！ウェブフォントの使い方」という記事を書きましたのでそちらをご参照下さい。

(更新日：2016年01月23日)