Ligature Icon フォントセットの自作方法とWebFont

開発 CSS


去年の10月に「iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】」というタイトルのエントリーで、Web Symbols TypefaceというWebFontを使って、タイプフェイスでアイコンを表示する方法について紹介しました。それ以来、似たようなFontが作成され公開されていますが、つい最近知ったsymbolsetというサイトで紹介しているsymbol fontには感心しました。

それまでのSymbol Icon Webfontには、それを使用する際の表現としてあまり適切でない部分がありました。アルファベットの「t」などに直接アイコンを割り当てていたため、code上では意味を成さない（コンピュータに理解できない）文字が並ぶことになってしまいました。そのため私が使用するときは、HTMLでは意味のあるの文字列（Twitterなど）を記し、CSSの:before擬似要素でcontentプロパティに任意の文字（tなど）を入れて挿入するという方法なら良しとしてきました。

しかし、この方法も完全に適切であるとは思えませんでした。symbolsetではこれをligature（合字）を使って表現する事で解決していて素晴らしいなと感じました。日本人にはあまりligatureに馴染みがないので、発想しにくい方法だったかもしれません。

ということで、他の方が公開しているfontに含まれていないiconを使用したかったりしたのもあって、Ligatureを使ったSymbol Fontを作成しました。その作成手順などについて書こうと思います。フォントについてはまだまだ勉強不足ですし、フォント制作についてはど素人なので少々誤りもあるかもしれませんが、そのときはコメントなどで教えていただけると助かります。

今回作ったフォントを試しにAdobe Illustratorで使ってみた動画です。

Ligature Icon フォントセットの自作

フォント制作アプリ（for Mac）

私はMac OSX Lion v10.7.4を使用しています。Mac用のフォント制作アプリはいくつかあります。有名なところではFontographerでしょうか。Fontographerを含めて数万円単位の高いソフトということもあってフォント制作には踏みきれず躊躇していましたが、Glyphsという良さげなソフトがAppStoreにあるのを見つけました。

こちらも￥26,000とそれなりに効果なのですが、廉価版としてGlyphs Miniというのが￥3,900でインストールできます。わたしのようにフォントに関してプロではないけど、ちょっとフォントを作ってみたりしてみたいという方にはちょうど良さそうです。Glyphsのサイトにはトライアル版もあるようです。

ただし、日本語Documentがものすごく少なくて皆無に近いです。GlyphsのサイトにはPDFのマニュアル（English）があるのでそれを読みながらちょっとずつ勉強している感じです。

フォントを作る

Glyphs Miniをインストールはしましたが、やっぱりもともと使っているAdobe Illustratorの方が使い慣れていることもあって、パスデータをAIで作成し、それをGlyphs Miniにコピペして字間調整などの微調整をするという事をしました。

最終的にはSymbol Icon Fontを作るのが目的ではありますが、Ligatureを使って表現するということもあってアルファベットや数字、記号も最低限作成しました。一晩でざっと作ったので適当な感じが否めませんが…。（時間があるときにでもアルファベットとかもきちんと整えられたらと思います。）
編集ページでは、試しにタイプしてみて並びを見ながら字間を調整するということもできるようです。便利です。

一部動画でプロセスを紹介してみようと思います。

Ligatureのタイプ

Ligatureはタイプのラベルを「_」アンダースコアで連結した文字列で書くことで作成することができます。
まずは[＋]で新しいタイプを作成して、そこのラベルをtwitterなら「t_w_i_t_t_e_r」といった具合に書き換えます。その時点で自動的にLigatureの項目欄に振り分けられます。あとはアルファベットや数字を作成したときと同じようにAIからパスデータをコピペして、字間調整などをして完了です。

フォントを書き出す

左上の[i]ボタンを押すとフォントの情報を編集することができます。フォント名や制作者名、バージョン、weightといった情報を入力できます。
ツールバーからMenu ＞ Exportで書き出すことができます。OTFで書きだしてFont Bookに読み込んでから、試しにAIなどで使ってみると良いと思います。

WebFontとして使う

ここまで作ることができたら当然WebFontとして使いたいというものです。Glyphs MiniではWebFont系のフォーマットの書き出しがどうにもできそうになかったので、OTFで書き出して変換しました。


WebFontのフォーマットは主に.eot .woff .ttf .svgです。変換にはWOFFコンバータというアプリを使用しました。これはOpenTypeフォントやTrueTypeフォントをWOFFやEOTに変換できるソフトで、無償で提供されています。
TTFとSVGに関してはFree Online Font Converterというサイトで変換しました。

WebFontを以下のように読み込みます。

@font-face {
    font-family: 'examplefont';
    src: url('examplefont.eot');
    src: url('examplefont.eot?#iefix') format('embedded-opentype'),
         url('examplefont.woff') format('woff'),
         url('examplefont.ttf') format('truetype'),
         url('examplefont.svg#examplefont') format('svg');
    font-weight: normal;
    font-style: normal;
}

CSS Fonts Module Level 3ではOpenTypeのフォント機能を制御できるようになっていて、Liagtureやスモールキャップといった機能をオンオフしたりできます。この辺についてはまだまだ勉強不足です。
あと文字列の描画処理の最適化に関するプロパティであるtext-renderingも記入しておきます。
Ligatureを使用するために以下をCSSに追加します。

body{
  font-family: 'examplefont';
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "liga" 1, "dlig" 1;
     -moz-font-feature-settings: "liga=1, dlig=1";
      -ms-font-feature-settings: "liga" 1, "dlig" 1;
       -o-font-feature-settings: "liga" 1, "dlig" 1;
          font-feature-settings: "liga" 1, "dlig" 1;
}

ここで"liga" 1はcommon ligaturesをオンにしていて、"dlig" 1はdiscretionary ligaturesをオンにしています。

これで、準備が整ってブラウザで見れる…はずなのですが、うまくいきませんでした。よくよく調べてみると、font-feature-settingsに対応しているのはまだFirefoxぐらいのものでWebkit系のブラウザは対応していないみたいです…。Firefoxでは問題なく表示できました。アルファベットや数字はもちろWebkit系ブラウザでもWebFontになっていましたが。

しかし、そうなるとsymbolsetはChromeやSafariでも動作を確認できたのですが、どのようにやっているのかわからないところです。どなたかわかる方がいましたら教えていただけると嬉しいです。

ちなみに、OTFフォントの変換には@font-face Generatorという、.eot .woff .ttf .svgとCSSやHTMLの例までいっぺんに書きだしてくれるサイトもあるのですが、ここで変換したところFirefoxでもLigatureは表示されなくなりました。このへんに関しては、もっと詳しい方じゃないとわからないところですね。


◆参考

追記 2012.07.03

今回のような特殊な絵文字などはUnicodeの私用面（BMPのU+E000〜U+F8FF）を使用するのが望ましいようですが、今回使ったGlyphs Miniというソフトでは各々のグリフに手動でUnicodeを設定することはできないようです。symbolsetではCSSの:before擬似クラス・contentプロパティで直接Unicodeを指定して挿入するクラスが用意されています。そのようなことをする場合にはUnicodeの設定が必要となりそうです。
Webkit系ブラウザで表示する方法は未だにわかっていません。

追記 2012.07.18

今回Glyphs Miniで作成したLigature FontをAdobe IllustratorやPhotoshopで使用する場合は、以下のような設定が必要となります。

  • Adobe Illustrator：OpenTypeパネルの「任意の合字」をチェックしてください
  • Adobe Photoshop：文字パネルのオプションで「OpenType > 任意の合字」をチェックしてください

今はFontForgeというオープンソースのフォント作成プログラムを使って上手くできないかを試しています。Glyphs Miniでは手動でUnicodeの設定をすることができませんでしたが、FontForgeでは設定することができます。Ligature Web Fontに関してはいろいろと試しながら調べている段階です。

追記 2012.10.01

FontForgeを使って作る方法がうまくいき、自作方法を新たに書きましたのでどうぞそちらをご覧ください。
【完全版】Ligature Symbols フォントセットの自作方法