フォントビルダー

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

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

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

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

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

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

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

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

SVGの要件

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

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

SVGテンプレート

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

カラーフォント

Font BuilderはアウトラインSVGからカラーフォントを作成できます。カラーモードでは、対応する塗り、線、線形／放射状グラデーション、不透明度をCOLR/CPALで保持し、対応するグラデーション／効果グリフにはSVGフォールバックを提供します。currentColorは文字色に追従します。追加パレットは明るい背景用・暗い背景用として指定できます。

Import Font…を使うと、対応するCOLR/SVGグリフをベクター素材として取り込めます。未対応のカラー効果やビットマップのみのグリフは、警告付きでモノクロ輪郭として取り込まれる場合があります。

Webパッケージの出力

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

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

ベストプラクティス

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