強火で進め

このブログではプログラム関連の記事を中心に書いてます。

@face-font向けに必要なグリフだけを含んだフォントファイルを作成してみた

今回はこちらのサイトで提供されている必要なグリフ(文字のデザイン情報)だけを含んだフォントファイルを作成してくれるウェブサービスを利用しました。

Web Font Optimizer
http://fonts.philip.html5.org/

フォントは自由に配布や加工が可能なフォントを利用している様です。詳しくはサイトで確認して下さい。

こちらのサービスでは自分の持っているフォントをアップしてそれを元に加工という方法は行えないようです。サイトに準備してあるフォントから選択になります。

プログラム(Perl)のソースも公開されている様なので自分でサーバに環境を準備すれば加工元のフォントも自由に設定できると思います。
※フォントファイルは編集、加工や @face-font などのWebでの使用を制限しているものが多いです。実際に使用される場合はフォントのライセンスを十分に確認してライセンス的に問題無いフォントを使用して下さい。

@face-font に対応しているブラウザは現在こちらの様になっています。こちらを確認するとIEで使われているEOT、そろそろリリースされるFirefox 3.6のWOFFという仕様に対応しているブラウザ以外ではTrueTypeかOpenTypeフォントを使用する必要が有ると分かります。

TrueTypeやOpenTypeフォント場合、フォントファイルのサイズは日本語を含んでいる場合には2〜10MB程度有り、ページが表示するまでちょっと時間がかかります。また、サーバの負荷も通常のサイトに比べかなり大きくなります。

そこで先程紹介したサイトでは必要な文字(グリフ)だけを含んだフォントファイルを作成することにより、フォントファイルのサイズを軽くしようとする事を目的にしたサービスです。

もちろんここで作成したフォントでは作成時に指定した文字以外は含まれないためその文字で描画しようとしても描画されませんので注意しましょう。

主にCSSの @face-font で指定可能なウェブフォント向けのフォントを作成するのを目的にしたサービスの様です。しかし、あくまで必要な文字だけを含んだフォントファイルを作成するサービスなのでこのファイルをPDFの埋込みフォントに利用するなどの使い方も出来るのでは無いかと思います。

最近話題のKindle用に作成ツールを作るというのも良いかもしれません。

使い方

1. サイトを開く。
2. 使用したいフォントをサンプル一覧から選択。
3. 入力欄に使用したい文字を入力。

生成が終了すると以下の様な画面が表示され、フォントファイルをDL出来るようになります。

フォントはTrueTypeフォントとEOTのファイルがDL出来ます。
こちらのページにはCSSの記述例も記載されています。

サンプル

こちらに実際にこのサービスで作成したフォントファイルを活用したサンプルを用意しました。

(2010/01/22 追記)
必要なグリフだけを含んだEOT、SVG、WOFFの各フォントを出力出来るサービスを見つけました。
おすすめです。

Font Squirrel | Create Your Own @font-face Kits
http://www.fontsquirrel.com/fontface/generator