Webフォントを利用する

これまでウェブページで表示できるフォントはユーザーの環境にインストールされたものだけでしたが、Web フォントの機能を利用すれば、CSSを使ってサーバー上に用意した任意のフォントをウェブページに表示できるようになります。
このWeb フォント機能が、Firefox3.5 以降、Safari3.1 以降、Opera10 以降でも実装されたようです。（Internet Explorer（以降 IE ）4 以降で対応済み）

ここでは、Web フォントを利用する方法を解説していきますが、IE とIE 以外のモダンブラウザーではサポートするフォントのフォーマットに違いがあるためそれぞれ別々に解説していきます。

ウェブページを閲覧するユーザーの環境にないフォントで Web ページを表示するためには、利用したいフォントをサーバー上にアップロードしておきます。

Web フォントを利用する際は、@font-face での利用条件がライセンスに明記されたフリーフォントを利用します。事前に利用するフォントのライセンスを必ず確認しておきましょう。
使用許諾契約の内容に疑問点などがある場合、著作権者に問い合わせるなどして解決しておくことをお勧めします。

@font-face 規則は、CSSで利用したいフォントを指定するためのもので、フォントデータの入っている URI を指定すると、フォントを持っていないユーザーにも任意のフォントで見せる事ができるというものです。

Firefox / Safari / Opera でWeb フォントを利用する方法

Firefox / Safari / Opera では、TTF（True Type Font）およびOTF（Open Type Font）形式のフォントファイルを利用することが可能です。
下記のコードは、 @font-face 規則を使ってサーバー上に用意したフォントの定義をおこなう方法を示しています。True Type 形式のフォントを利用する例です。

@font-face {
	font-family: フォントファミリー名;
	src: url('フォントファイル名') format("truetype");
}

font-family でフォントのファミリー名を、src でフォントファイルの URI を指定します。 このとき、ファミリー名には任意の名前を指定することが可能です。 @font-face 規則を使って定義したフォントは、閲覧ユーザーの環境にインストールされているフォントと同じように、スタイルシート内で利用できるようになります。

例えば、「WebFont」というファミリー名で定義したフォントは、font-family プロパティを「WebFont」と指定すれば利用することが可能になります。 下記の例では、h1 要素でマークアップした部分を「WebFont」で表示するように指定している。

@font-face {
	font-family: WebFont;
	src: url('WebFont.ttf') format("truetype");
}

h1 {
	font-family: WebFont;
}

Internet Explorer でWeb フォントを利用する方法

IE で Web フォントを使うには、TTFやOTF形式ではなく、独自の EOT（ Embedded Open Type ）形式のフォントを用意する必要があります。

マイクロソフトが提供する無料ツール「Web Embedding Fonts Tool（WEFT）」を使えばTTFからEOTへの変換がすることができます。Web Embedding Fonts Tool（WEFT）は以下の場所からダウンロードできます。
マイクロソフト製の変換ツール「Web Embedding Fonts Tool（WEFT）」

また、ttf2eot というWebサービスを利用しても変換することが可能です。
ttf2eot は、変換したい TTF ファイルを「選択」して「 Convert to .eot 」ボタンを押すだけで、EOT ファイルに変換してくれ上記のツールに比べても非常にお手軽に変換することができますので EOT 変換のキラーツールとなるでしょう。

@font-face 規則を使ったフォントの定義の記述自体はFirefox / Safari / Opera の場合とほぼ同じです。 ただし、IE は EOT 形式にしか対応しませんので format 指定がありません。

@font-face {
	font-family: MyWebFont;
	src: url('MyWebFont.eot');
}

下記の例は、Firefox / Safari / Opera 用の CSS の記述と、IE 用の CSS の記述をまとめて、クロスブラウザに対応したコードです。

/* FOR IE */
@font-face {
	font-family: MyWebFont;
	src: url('MyWebFont.eot');
}
/* FOR Firefox, Opera, Safari */
@font-face {
	font-family: MyWebFont;
	src: url('MyWebFont.ttf') format("truetype");
}