Webフォントを使うときのメモ

Web上で自分で好きなようにフォントを定義したときのメモです。
あくまで個人のメモなのでうまくいかなくてもあしからず。

WOFFコンバータを使ってWOFFファイルとEOTファイルを生成する。
・WOFFはWebフォントの標準フォーマット
・EOTはIE用のフォーマット
このときのTrueTypeフォントを使うのがポイント。OpenTypeフォントでもかまわないけどブラウザによってはきちんと表示されない場合あり。

こんな感じのCSSを作る

@font-face {

  font-family: "ConvertedFonts";

  src: url("変換したフォント.eot?") format('eot'),

       url("変換したフォント.woff") format('woff'),

       url("変換したフォント.ttf")  format('truetype');

}

.ConvertedFontsClass {

  font-family: "ConvertedFonts";

}

このときのポイントは変換に使ったTrueTypeフォントもソースに使うこと。
HTMLでlinkタグを使って外部CSSとして読み込んでもいいし、styleタグを使って同じファイルに記述してもいいから、とりあえずCSSを使えるようにする。

で、後は普通のCSSと同じ感じでspanタグやらdivタグで囲んでやればOK

これで、たぶん環境に関係なく同じフォントで閲覧できるはず。

P.S.
自作以外のフォントを使うときは必ず使用条件を読んでおいてください。ときどき変換がアウトなフォントがあるので。