CORDING

IEでWebフォントを表示させる

thumb4

Chrome やその他のブラウザでは .otf や .ttf であれば、フォントファイルと CSS の記述で表示されますが、IE だけは専用のフォントファイルが必要です。
.eot という形式のフォントファイルを別に用意しておく必要があります。
今回は、WOFFコンバータという通常のフォントファイルを eot に変換してくれるフリーソフトを使用しています。

 

woff / eot ファイルに変換してくれるソフト

WOFFコンバータ

eot ファイルに変換したら、otf フォントなどと一緒にサーバーにアップします。

サーバーにアップしたら、CSS で下記のように記述します。

 

style.css

@font-face {
	font-family: "sample-font";
	src: url("./../fonts/sample-font.eot");
	src: url("./../fonts/sample-font.eot?") format('embedded-opentype'),
	url("./../fonts/sample-font.woff") format('woff'),
	url("./../fonts/sample-font.otf") format('opentype');
	font-style: normal;
	font-weight: normal;
}

 

フォント名やディレクトリなどは、適宜変えてください。

実際使用したい要素に font-family で設定した名前を記述します。

 

style.css

h1{
	font-family: "sample-font";
}

 

これで IE でもWebフォントを表示できるようになりました！