More than 1 year has passed since last update.

注・こちらの記事はやや内容が古くなっているので、Symbols for Sketchをどうぞ

リブライズのアイコンをWebフォント化するにあたり、色々はまってしまったので、さくっとシンボルフォントを作るためのテンプレートをGitHubに公開しました。Ligature (合字) を使った方法が最近のトレンド(?)ですが、デザイナがしょっちゅう更新をかけるような場合、うまく使えるツールがないのが現状。ここでは、Font Awesomeなどと同様に、UnicodeのPUA (プライベート領域) にフォントを割り付ける、比較的「枯れた」方法をとります。

このテンプレートを使うのに、必要なソフトは2つ。

Glyphs mini は比較的最近出てきたGlyphsというフォント作成環境の廉価版です。シンボルフォントを作るには十分な機能を備えていて、$45くらい。このニッチな業界としては、限りなくお買い得です。

その他、フォントの変換をローカルで行う場合は、FontForgeなどが必要ですが、その辺りは割愛します。mekkablueさんの説明へのリンクを後半に載せていますので、そちらをどうぞ。

(というわけで、下記は Symbols の日本語訳です)

symbols.ai

シンボルというかアイコンを、Illustrator CS6で作るためのテンプレートです。

  • 1792 x 1792 px : ひとつのフォントのサイズ。1792 = 128 x 14 = 64 x 28 なので、14px または 28px で表示した場合に、くっきりはっきり。※Font Awesomeと共通です。Bootstrapの標準文字サイズも14pxです。
  • 64 ドキュメント : ひとつのIllustratorファイルに、64文字分のドキュメントが含まれています。64という数字は、ひとつのWebサイトを作成する上では十分な数字です。

Illustrator

symbols.glyphs

Illustratorで作成したアイコンを Glyphs mini or Glyphs でフォントにするためのテンプレート。

  • 1792 x 1792 px : Illustratorのテンプレートに揃えてあります。(unit per em は1792です)
  • U+F700 ~ U+F73F が割当済みです。これらはUnicodeの PUA (プライベート領域)です。

Glyphs mini

使い方

  1. GitHub から ダウンロード
  2. Illustratorで symbols.ai テンプレートを使って、アイコン制作。
  3. symbols.glyphs をGlyphs mini で開いておいて、コピー & ペースト。
  4. fonts ディレクトリに Glyphs mini から、OTF(= Open Type Font)でエクスポート。
  5. OTFを各種Webフォントに変換。@font-face kit generator などを参照のこと。変換したフォントもfontsディレクトリに。
  6. test.html を開いて、フォントが正しくエクスポート/コンバートされたか確認。
  7. symbols.css をお好みで書き換え :-)

上級編(?)

黒い画面を見ても大丈夫な人は、ローカル環境でもWebフォントの変換が可能です。

  1. 未インストールの場合は、FontForgeと周辺ツールをインストール。 the instruction written by mekkablue 参照。
  2. Meta.xml を書き換えて、ライセンスなどを記載。WOFFを作るために必要です。
  3. 黒い画面で、レポジトリのディレクトリに移動。 cd your/repository
  4. スクリプトを実行。 sh webfontmaker.sh 自動的に、fontsサブディレクトリに各種フォントが変換されているはず。

Glyphs mini で、OTFを出力したら、自動的にこのスクリプトが走るように、gruntjsあたりを仕込むのが良さそうです。(やってないけど)

Appendix

webfontmaker.sh is originally created by mekkablue. See more detail here…

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.