スタイルシートのfont-familyでフォントの種類を選択できるのは当然なのですが、ホームページを見ている側にfont-familyで指定しているフォントが入っていなければなんの意味もありません。まあ、百聞は一見に如かず実際に使ってみましょう。

.font {
      font-family: “ＤＦＧ細丸ゴシック体”;
      font-size: 30px;
}

ＤＦＧ細丸ゴシック体

おそらく普通の書体で表示されていると思います。
これを画像テキストで書いてみましょう。

.font-family {
      background: url(../img/font-family.gif) no-repeat;
      width: 242px;
      height: 29px;
      font-size: 0;
      text-indent: -9999px;
      text-decoration: none;
}

ＤＦＧ細丸ゴシック体

これならＤＦＧ細丸ゴシック体のフォントで表示されていると思います。こうすると、自由にいろんなフォントが使えるようになりますし、様々な装飾が施せるようになります。

ちなみに、画像テキストのスタイルシートを組む時のポイントは、

• 「background: url(../img/画像ファイル) no-repeat;」で画像を指定
• 「width: 242px;」と「height: 29px;」で横幅と縦幅の画像サイズを指定する
• 「text-indent: -9999px;」で実際に表示されるテキスト画面外へ飛ばしてしまう
• 「font-size: 0;」でフォントを小さくする
• 「 text-decoration: none;」でCSSで発生する余計な装飾を外す

です。