ホーム > サイト更新(wordpress) > Webフォントを導入 後編

Webフォントを導入 後編

【関連】Webフォントについての記事(タグ:webフォント)

1)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;
}

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
http://www.matrix3dcg.net/archives/738/trackback
トラックバックの送信元リスト
Webフォントを導入 後編 - 建築インテリアCGパース・アニメーションムービー制作[matrix3dcg] より

ホーム > サイト更新(wordpress) > Webフォントを導入 後編

ページの上部に戻る