日本語のWebフォントを使ってみる

このブログ内でもWebフォント(Google Noto Fonts)を使用していますが、今回は日本語のWebフォントを使ってみたいと思います。

今回使用するのはこころ明朝体というフォントです。

使用方法

サイトからフォントをダウンロードすると、OTF形式のファイルが格納されています。
OTF形式だとIEで表示されないので、WOFF形式に変換してから使用します。

変換サイトをいくつか試してみましたが、日本語を含むとファイルサイズが大きく
エラーが出てしまうため、今回はWOFFコンバータというフリーソフトを使用しました。

WOFF形式に変換後、CSSで以下のように記述します。

CSS

@font-face {
	font-family: 'kokoro';
	src: url("Kokoro.woff") format('woff');
}
#sample {
	font-family: 'kokoro';
}

これで#sampleのフォントが変更されますので、HTML側にも記述します。

<p id="sample">日本語フォントのテスト。</p>

日本語のWebフォントを使ってみるのデモページ
　

IEの古いバージョン・Androidでの対応

WOFF形式のみだとIE8以下・Android(主に4.3以下)で対応していないため、
これらにも対応する場合、フォント形式と指定が別途必要になります。

IEにはEOT形式、AndroidにはTTF形式を使用するため、先ほどのWOFFコンバータで作成します。
(EOTはWOFFに変換するときに一緒に作成、TTF形式は作成したWOFF形式から変換できました。)

作成後、CSSで以下のように指定を追加します。

@font-face {
	font-family: 'kokoro';
	src: url('webfont.eot');
	src: url('Kokoro.eot?#iefix') format('embedded-opentype'),
		 url("Kokoro.woff") format('woff'),
		 url('Kokoro.ttf') format('truetype');
}
#sample {
	font-family: 'kokoro';
}

IE・Android対応版のデモページ
　

これでIEの古いバージョンやAndroidでもWebフォントが表示されるかと思います。

関係ないけど、Notoフォントと聞いて能登麻美子さんが浮かんだのはきっと自分だけじゃないはず。