@font-faceで使えるフォント15選[CSS]

CSS3の登場で注目を浴びている@font-faceですが、今すぐ使える@font-faceで使えるフォントの紹介です。

元ネタ

@font-faceとは

その前に@font-faceとは、フォントをサーバーに設置し、@font-faceでそのフォントの名前とフォントタイプとフォントのパスを記述することで、サイト訪問者のパソコン環境にそのフォントがインストールされてなくても、そのフォントを表示することができるCSS3のプロパティです。

Firefox, Safari, Opera, Chromeでの指定

@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Regular.ttf) format("truetype");
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Italic.ttf) format("truetype");
	font-style: italic;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Bold.ttf) format("truetype");
	font-weight: bold;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-BoldItalic.ttf) format("truetype");
	font-weight: bold;
	font-style: italic;
}
 
h3 { font-weight: normal; }
h3.droid { font-family: "Droid Serif", serif; }

Internet Explorerでの指定

@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Regular.eot);
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Italic.eot);
	font-style: italic;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Bold.eot);
	font-weight: bold;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-BoldItalic.eot);
	font-weight: bold;
	font-style: italic;
}

Museo Sans

font0908291.jpg

Quicksand

font0908292.jpg

Delicious

font0908293.jpg

Vollkorn

font0908294.jpg

Andika Basic

font0908295.jpg

TitilliumText14L

font0908296.jpg

Zag Regular

font0908297.jpg

ChunkFive

font0908298.jpg

TypoSlabserif

font0908299.jpg

Whitehall

font09082910.jpg

Xenophone

font09082911.jpg

Daniel

font09082912.jpg

Sansumi

font09082913.jpg

Journal

font09082914.jpg

Miama

font09082915.jpg