Webフォントを導入　後編

【関連】Webフォントについての記事（タグ：webフォント）

１）ttfファイルとEOTファイルを用意する。

M+フォントにはTTFファイルがあるんですが、IE8以下用のEOTファイルは自分で変換して用意する必要があります。IEはTTFファイルに対応してないので別途用意しないといけないんです。

http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/download/index.html
↑ここで元になるTTFファイルをダウンロードします。

http://ttf2eot.sebastiankippe.com/
ダウンロードしたファイルを、上記サイトでEOTファイルに変換。「ファイル選択」をして「conver to .eot」をクリックするだけです。

TTFファイルとEOTファイルを、サーバーにアップロード。CSSファイルと同階層に置くとよいでしょう。下記のCSSでは同階層の”webfonts”というフォルダに入れました。※それ以外の場所の場合は下記URLのurlの記述が変わってくるので注意してください。

2）font-famillyを定義するCSSファイルをつくる

IEにもそれ以外のwebブラウザ（firefox,safari）に対応する記述が必要です。
font-rとfont-bという名前で定義しました。名前は好きな名前にできます。フォント指定するcssで、その名前を利用すればいいのです。（詳しくは後述

下記cssコードを含むCSSファイルをサーバーにアップロードします。
※.eot?”の?は何故か必要みたいです。詳しくはこちら

@charset "UTF-8";

@font-face
{
font-family: font-r;

src: url('webfonts/mplus-1p-regular.eot?') ,
url('webfonts/mplus-1p-regular.ttf') format("truetype");
}

@font-face
{
font-family: font-b;

src: url('webfonts/mplus-1p-bold.eot?') ,
url('webfonts/mplus-1p-bold.ttf') format("truetype");
}

3)フォント指定するCSSに以下のように追加する

font-faceで定義したfont-family名を使います。ここではfont-r, font-bです。
各要素にfont-familyを指定すれば完了です。

body {
	font-family: font-r;
}
h1 {
	font-family: font-b;
}
h2 {
	font-family: font-b;
}