使い方

テキストのアウトライン化、SVGフォント作成、ソースフォント編集、サブセット、変換、Webパッケージまでの実用的なワークフローです。

1. フォントをインポートする

• フォントファイルをメインウィンドウへドラッグ＆ドロップします。
• またはFile -> Import Font Fileを使います。
• グリフ閲覧のインポート形式: ttf / woff / woff2
• 新しいインポートは現在のセッションデータを置き換えます（1セッションで複数フォントを統合することはできません）。

2. グリフを閲覧・絞り込む

• 左サイドバーでUnicodeブロック（Basic Latin、CJK、Emojiなど）を絞り込みます。
• グリフ名やUnicodeテキストで検索します。
• 選択ショートカット:
  • Command + Click: 離れたグリフを複数選択
  • Shift + Click: 範囲選択
  • Command + A: すべて選択
  • Delete: 現在のデータセットから選択グリフを削除
  • Space: 選択グリフをプレビュー

3. メタデータを確認する

右側のインスペクターには3つのタブがあります。

• Font: フォントメタデータ、OpenTypeのレイアウト・スクリプト・機能の概要、可変フォントの検出
• Selection: Unicode、HTMLエンティティ、CSS/Swift表記、UTFエンコーディング、メトリクスなどグリフ単位のデータ
• Export: グリフ素材の書き出し、Text to SVG、サブセット、Webパッケージのワークフロー

4. テキストをSVGアウトラインへ変換する

フォントを読み込んだ後、ExportタブからText to SVGを開きます。

• 単語、文章、複数行テキストを入力
• フォントサイズ、使用可能な場合の可変ウェイト、文字間隔、行間、折り返し幅、配置、余白、塗り色を調整
• フォントに忠実なSVGにしたい場合はフォールバックを無効化
• SVGをクリップボードへコピーするか、単独の.svgとして保存
• 出力SVGにはアウトラインが含まれるため、使用場所にフォントをインストールする必要はありません

5. SVG素材からフォントを作る

アプリメニューからFont Builderを開きます。

• アウトラインSVGをドロップして新しいフォントを作成
• グリフ名とUnicode値を設定
• SVGグリフの追加や既存Unicodeグリフの置換が必要なら、静的TrueTypeベースのソースフォントをインポート
• Browse Glyphsでソースフォントの置換対象を選択
• 素材を描く前に、ベースラインと境界ガイド付きのSVGテンプレートをダウンロード
• エクスポート前にPreflight Checkを実行
• TTF、WOFF、WOFF2、CSS、デモHTML、メタデータ、完全なWebパッケージを書き出し

Font Builderは静的なアウトラインSVGを想定しています。インポート前にテキストをアウトラインへ変換してください。ライブSVGテキスト、ラスター画像、マスク、フィルター、クリッピング、スクリプト、アニメーション、外部リソースは、変更されずに拒否されます。

6. Font Builderプロジェクトを保存・再開する

後で作業を続ける場合は.webfontprojectを使います。

• SVGグリフ、ビルド設定、出力オプション、置換対象、ソースフォント使用時の埋め込みデータを保存
• 開くとグリフセットとソースフォントデータを復元
• 置換対象を設定していた場合は、保存されたソースフォントデータから復元

7. グリフ素材を書き出す（SVG / PNG / PDF）

• 単一グリフと複数選択の一括書き出しに対応
• 書き出しダイアログでサイズと色を設定
• ファイル名はグリフ名とサイズのサフィックスに基づいて作成

8. サブセットフォントを生成する

ソースモード

• Current Selection: 選択したグリフをそのまま使う
• Text Input: テキストを貼り付けるか.txtを読み込み、ロード済みフォントの文字と照合

出力形式

• WOFF2、WOFF、TTFを任意に組み合わせて選択

OpenTypeの制御

• レイアウトポリシー:
  • すべてのレイアウト機能を保持
  • 必須の位置調整だけを保持
  • すべてのレイアウトテーブルを削除
• 機能タグのフィルター:
  • 選択したタグだけを保持
  • 選択したタグを削除
  • フィルターを無効にして利用可能なタグをすべて保持

検証とプレビュー

• Subset Previewでグリフ数、推定ファイルサイズ、欠落文字数を確認
• ファイル書き込み前にデコード、必須テーブル、cmapの範囲などを検証

9. Webパッケージを生成する

Generate Web Packageは次を作成します。

• WOFF2 + WOFFを含むfonts/
• @font-faceとunicode-rangeを含むCSS
• プレビューと文字マッピング用のdemo.html

Font Builderにもアイコンフォント向けのWebパッケージ出力があり、CSS、デモHTML、メタデータ、グリフプレビュー、HTMLスニペットを含められます。

10. フォント形式を変換する

• Single Font Conversion...: 1ファイルを変換
• Batch Font Conversion...: キューで一括変換
• 入力形式: ttf / otf / woff / woff2
• 出力形式: WOFF / WOFF2 / TTF/OTF (Auto)

11. 現在の制限

• サブセット生成は一度に1つのソースフォントに対応
• サブセット出力は現在TrueTypeアウトラインフォントのみ対応
• Font Builderのソースフォント編集は静的TrueTypeベースのフォントに対応
• Font BuilderのSVG入力はアウトライン化された静的素材である必要がある
• 読み込んだフォントに可変ウェイト軸がある場合、Text to SVGでSVGアウトラインを書き出せる