@font-faceのCSSルールで使えるフォント100選

Font Squirrelより、@font-faceのCSSルールで使えるフォント100の紹介です。

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

fontface0908021.jpg

そこで、Font Squirrelでは、@font-faceで使えるフォントとそのCSSスタイルを無料でダウンロードすることができます。

ただし、フォントの利用に関しては、ライセンスを注意しなければならないそうです。

fontface0908022.jpg

ちなみに、「@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