ひとつの文書にさまざまなフォントの文字があると，統一感などはどうであれ，華やかである。CSS でもフォントの指定はできるが，そのフォントがはたして相手側のシステムに存在するのかという問題がつねにつきまとうことになる。

　フォントの種類を指定するのは font-family-属性である。

font-family 属性は複数の値をとることができ，それらは半角カンマで区切られる。また，あらゆる要素について適用される。

　（フォントファミリ）は，フォントファミリ名，もしくは後述する一般的なフォントファミリである。ここで，フォントファミリとは，同様のデザインを持つフォントの集まりであり，たとえば，“Times”というフォントファミリには，正体，ボールド体，イタリック体などがあるが，いずれも“Times”のフォントファミリに属している。

　たとえば，“Roman”というフォントにする場合は，次のようになる。

　ただし，フォントファミリ名が空白を含む場合，引用しなければならない。

　HTML 要素を示すタグの STYLE 属性の値とする場合，二重引用符を使うと属性値が終わってしまうから，かわりに単一引用符で引用する。

　フォントを指定しても，相手側のシステムにそのフォントがないかもしれない。また，指定したフォントにない文字が文中に含まれていて，それをほかのフォントから“借りて”こなければならないかもしれない。そのようなときに，font-family 属性に複数の値を与えて解決を試みることができる。

　このとき，簡単には，はじめに書かれたフォントが優先して使われる。

　たとえば，“Helvetica”というフォントを使いたいのだが，相手側システムにない場合はかわりに“Arial”にしてもよい，という場合はこのようになる。

　また，“Times New Roman”で書きたいのだが，ところどころに“Symbol”というフォントでないと存在しない文字があるという場合はこのようにする。

　このように書いたとしても，まだ“フォントがない”という状況になるかもしれない。“どうしてもない”場合はブラウザの標準フォントが使われるが，“どうしてもない”前に“だいたいこんなフォントです”と言っておけば最低限のデザインは伝えられる可能性がある。

　フォントを分類するというのは難しいのだが，CSS では便宜的に 5 つの大まかな分類をし，それを一般的なフォントファミリとしている。

serif

セリフ体。“Times”，“Times New Roman”，“Minion Web”に代表される。“明朝体”もこれに入る。

sans-serif

サンセリフ体。“Helvetica”，“Arial”，“Vernada”，“Gill Sans”などに代表される。“ゴシック体”はこれに含まれる。

cursive

草書体。スクリプト体はこれに含まれる。“Zapf-Chancery”に代表される。

fantasy

ひじょうに装飾的なフォント。“Western”に代表される。

monospace

等幅フォント。“Courier”，“Courier New”に代表される。日本語の等幅フォントはこれに含めてよい。

　フォントを指定するときは，カンマで並べた最後にこの 5 つの中から指定しておこう。そうすれば，相手側のシステムへの配慮にもなるし，書き手の意思もある程度は伝わることになる。

　フォントを変える例を見てみよう。もし，例に示したフォントがあなたのシステムにない場合，最後の“一般的なフォントファミリ”がどのようにはたらくかも確認しておこう。

　日本語フォントの場合は，“一般的なフォント名”では事足りない場合が多い。文字化けやひどいときには表示すらされないこともあるので，システムなどに応じて可能性のあるフォント名をカンマで並べて丁寧に指定するようにしたい。たとえば，

　あまり一般的でないフォントを使うときはさらに注意が必要である。

　“指定されたフォントファミリ中にない文字は，属性値並びの次のフォントファミリが試みられ，ついに属性値並びから見つからなければブラウザ既定のフォントファミリになる”ことから，正しい CSS の実装では，欧文フォントのみを指定しても 2 バイト文字はブラウザ既定のフォントになるはずである。しかし，IE3 および IE4 では，欧文フォントのみの指定は 2 バイト文字が化けることがあるので，2 バイト文字が出てくる場合には日本語フォントを指定するほうが安全であろう。