Font Squirrelより、@font-faceのCSSルールで使えるフォント100の紹介です。
Safari4やFirefox3.5のリリースにあたり、徐々に、その全貌が明らかになりつつある「@font-face」ですが、「@font-face」とは、自分の好きなフォントをWebページで表示することができるプロパティです。

そこで、Font Squirrelでは、@font-faceで使えるフォントとそのCSSスタイルを無料でダウンロードすることができます。
ただし、フォントの利用に関しては、ライセンスを注意しなければならないそうです。

ちなみに、「@font-face」を使ってのデモページの一部です。(上図は、そのキャプチャ画像)
デモページ、Safari4もしくは、Firefox3.5で閲覧してください。
Destroyフォントという、グランジ系フォントの一種なのですが、表示がちゃんとされています。見ていただけてお分かりだと思いますが、画像ではありません。
「@font-face」で、タイポグラフィを画像を使わずに直接Webページに表現できます。
ちなみに下記が、ダウンロードしたフォントの@font-faceのスタイルです。
/* For IE */
@font-face {
font-family: 'Destroy';
src: url('DESTROY_.eot');
}
/* For Other Browsers */
@font-face {
font-family: 'Destroy';
src: local('Destroy Regular'),
local('Destroy-Regular'),
url('DESTROY_.TTF') format('truetype');
}
@font-faceの詳しい解説はこちらに載っています。
@font-face - MDC
コメント