ピクセル単位のデザインをしたかったのでWebフォントを使ってみたのでメモっとく。

ライセンスフリーのフォント M+ のサイト。

  • http://mplus-fonts.sourceforge.jp/webfonts/

使い方

1. フォントをダウンロードして置く。
  • http://mplus-fonts.sourceforge.jp/webfonts/mplus-2m-regular.ttf

2. CSSでフォントファミリを登録する。

@font-face { font-family: mplus-2m-regular; src: url('mplus-2m-regular.ttf') format("truetype"); }

3. 各要素でフォントファミリを指定する。

<h1 style="font-family: mplus-2m-regular;">SAMPLE TEXT</h1>

だけ。

mplus-2m-regular は固定幅で 全角:半角 が 2:1 に近いので使い易い。

他に IPA フォントも使えるがライセンス上微妙らしい。
＃Webフォントを再配布とみなす場合にライセンスファイルが添付できないので。

IE対応

IEはいつもの様に特殊でフォントの形式を MS 独自の EOT にしなければいけない。 そのかわり IE6 でも使える。

TTF->EOT 変換は以下のサービスでできる。

  • http://ttf2eot.sebastiankippe.com/

その他

日本語のTTFファイルは小さくても 1MByte 程度あるので回線が細いと重い。 ２回目以降はキャッシュが効く。

全角:半角 がぴったり 2:1 になるフリーのWebフォントが有ったら教えて下さい。