フォントビルダー

アウトライン化したSVGからアイコンフォントやWebフォントを作成したり、静的TrueTypeベースのソースフォントにグリフを追加・置換したりできます。

Font Builderは、整ったベクター素材から予測可能なフォントを作成するための機能です。対応していないSVGやフォント機能は、変更せずに拒否します。

SVGから新しいフォントを作成する

アイコン素材をフォントとして配布したい場合は、次の手順を使います。

1. Font Builderを開きます。
2. アウトライン化したSVGをグリフ一覧へドロップします。
3. グリフ名とUnicode値を確認します。
4. Preflight Checkを実行します。
5. TTF、WOFF、WOFF2、CSS、デモHTML、メタデータ、完全なWebパッケージを書き出します。

ソースフォントのグリフを追加・置換する

静的TrueTypeベースのソースフォントをインポートできます。

• ソースフォントにSVGグリフを追加
• 既存のUnicodeグリフをSVG素材で置換
• Browse Glyphsでソースフォントから置換対象を選択
• ソースフォントの編集時に置換グリフIDを維持
• 後で続ける場合は.webfontprojectとして保存

SVGの要件

Font Builderが受け付けるのは静的なアウトラインSVGです。

インポート前に素材をフラット化してください。ライブSVGテキスト、ラスター画像、フィルター、マスク、クリッピングパス、スクリプト、アニメーション、動画、音声、iframe、外部リソースは対応していません。

SVGテンプレート

アイコン素材を描く前にSVGテンプレートを書き出してください。テンプレートにはベースラインと境界のガイドが含まれるため、フォントメトリクスに合わせてアイコンを配置できます。

Webパッケージの出力

Webパッケージには次の内容を含められます。

• フォントファイル
• @font-faceを含むCSS
• デモHTML
• メタデータ
• グリフプレビュー
• アイコンフォント用HTMLスニペット

ベストプラクティス

• アイコンフォントでは、標準Unicodeを意図的に使う場合を除き、Private Use AreaのUnicode値を使う。
• アイコンSVGを同じキャンバス上で視覚的に中央揃えする。
• エクスポート前に毎回Preflightを実行する。
• 本番フォントを出荷する前に赤い行を修正する。