Webフォントの作り方と応用方法

こんにちは。
以前「Three.jsとBlenderによるWebGL」という記事を書かせて頂いた、
html5、javascript、flashなどのクライアント開発をメインに担当しております、
菅家(@KA_ka_YY)と申します。

6月にリリースした担当プロジェクトにおいて、
数字やアイコンをカスタマイズしたWebフォントとして作成し、使用しました。
Webフォントは非常に使い勝手がいいのと、カスタムフォントを作るのに
非常に便利なソフトを見つけたので紹介させていただきたいと思います。

Webフォントのメリット

  • ベクター形式なので拡大縮小による劣化がない
    フォントデータはベクターデータです。
    →つまりスマホ開発においてretio別に画像を切り出したりする必要がない！

  • 制御のしやすさ
    html上で指定文字を記述するだけ。デコレーションもcssによってある程度行える。
    陰、グラデーションなど

  • 容量比較 ：画像フォントと比較した場合
    ・Webフォントの場合
    プロジェクトで使用したフォント数は31文字で、容量8KB！
    ・画像文字の場合
    圧縮と減色ツールを用いて9KB
    （※ファイル容量は差がないのですが、
    画像だとさらに制御用jsおよびcssファイルを読み込む必要があるので、
    トータルだとWebフォントの方が軽かったりします。）
    また、フォントを色別けしたい場合などは、画像の場合　色の分だけ
    書き出さなければならないが、Webフォントだとstyleの色指定のみで済む

  • 更新性が高い
    もしどこか1文字に変更があったとしても、Webフォントなら フォントを変更するだけで、カーニング調整など自動でしてくれる。画像だと変更文字の幅が変わると、他の文字マップ情報に影響が出てくる。つまり単色系ならWebフォントを使用した方が圧倒的に便利！

Webフォントのデメリット

  • cssによるテキストへのグラデーションなどフィルタースタイル系はPCやiOS6以上でないとできない。Androidは未対応。

  • cssによるshadowを大量にかけてアニメーションをさせると処理落ちが目立ってしまう。つまりディティールの凝った装飾には向いてない。

  • 著作権に注意！
    手元にあるテキストフォントデータの一部を抜き出して使用する場合、
    いくら画像書き出し用としてフォントの使用権を買っていたとしても、
    カスタムWebフォントとして使用する場合は著作権に引っかかる可能性があります！
    規約をよく確認の上使用することをおすすめします。
    なるべく、オリジナルフォントを作成して使用することをおすすめします。

CSSでのWebフォント指定方法

cssでのWebフォント指定方法は、検索すれば大量にでてきますが一応のせておきます。

@font-face {
font-family: 'myfont';
font-style: normal;
url("myfont.woff") format('woff'),
url("myfont.otf") format('opentype');
}
.myfont {
font-family: 'myfont';
color: #f00;
}

カスタムフォントの作り方

「OTEdit」という有償ソフトを使用した作成方法となります。
http://opentype.jp/oteditmac.htm

作成の流れ
  1. イラレで1000×1000でフォントを作成し、SVG書き出し
  2. OTEditで任意の文字を選び、SVGをインポート！
  3. サブセットフォントメーカーにて任意の文字を指定し書き出し！以上！

では詳細を以下にのせておきます。
「龍」という文字を打つと龍のイラストになるオリジナルフォントを作成したいと思います。
  1. イラレで1000×1000でフォントを作成し、SVG書き出し
    $1 pixel｜サイバーエージェント公式クリエイターズブログ-龍

  2. OTEditで任意の文字を選び、SVGをインポート！
    • OTEditを立ち上げ、新規作成
      $1 pixel｜サイバーエージェント公式クリエイターズブログ-新規作成

    • オリジナルのフォントの書体名やコピーライトを入力
      $1 pixel｜サイバーエージェント公式クリエイターズブログ-書体詳細

    • まっさらな正方形のウインドウが出てきますので、 ウインドウ上部にある「A」をクリックし、「龍」と打ち込んでOKを押して下さい。
      $1 pixel｜サイバーエージェント公式クリエイターズブログ-編集文字選択

    • すると「龍」という文字の編集ウインドウが開いたと思います。 そうしましたら、先ほど書き出したSVGをインポートしましょう。
      $1 pixel｜サイバーエージェント公式クリエイターズブログ-インポート

    • インポート完了！
      $1 pixel｜サイバーエージェント公式クリエイターズブログ-龍フォント

    • この状態で保存しましょう。ここでは名前「ryuFont.otf」にしておきます。これでオリジナルフォントは完成し、もう使えるのですが、ファイル容量が大きいです。238KBもあります。

  3. サブセットフォントメーカーにて任意の文字を指定し書き出し
    容量が大きいのは、「龍」以外の文字の余分なデータがあるためです。 そこで「サブセットフォントメーカー」（フリー）というアプリを用いてこのフォントの中身を「龍」という文字のみにしたいと思います。

    $1 pixel｜サイバーエージェント公式クリエイターズブログ-サブセットフォントメーカー

    「作成開始」を押しましょう。
    完成です！！　4KB！！

    さらに「作成終了後、WOFFコンバータを起動するに」チェックをすれば
    「作成開始」ボタンと同時にwoff形式の軽量フォントを一緒に書き出してくれます。

    ちなみに上でも書きましたがプロジェクトで使用しているフォントは31文字で8KBです。

カスタムフォントの応用一例

カスタムWebフォントにアニメーションをかけたサンプルを作りました。
是非スマホで確認してみて下さい。
http://kf-plvs-vltra.com/sample_webfont.html

使用ソフト

  • OTEdit　（シェアウェア：1ライセンスにつき¥12,000）
    http://opentype.jp/oteditmac.htm

  • サブセットフォントメーカー
    http://opentype.jp/subsetfontmk.htm

    • まとめ

    ほぼ、メリット、デメリットに書いた通りですが、
    1. retioごとに画像を書き出したりする必要がない
    2. 更新性が高い
    3. 制御しやすい
    4. グラデはまだ無理
    5. 過度なアニメーション処理に弱い
    6. 著作権に注意！
    です。

    また、フォントのフォーマットはWOFF・TTF・EOT・SVG などがあります。Webフォントとしての普及率はWOFFが最も高く軽量です、今後主流になるでしょうが、 僕がスマホの実機で調べた所、WOFFはAndroid2.2以下で表示されませんでした。 そのため「woff」と「otf」の2つを指定しておいた方がいいでしょう。

    参考文献