コンテンツへ移動
+

使い方

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

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

  • フォントファイルをメインウィンドウへドラッグ＆ドロップします。
  • またはFile -> Import Font Fileを使います。
  • グリフ閲覧のインポート形式: ttf / otf / woff / woff2 / ttc / otc
  • ttc / otc コレクションでは、プレビューとサブセット作成に使うフェイスを1つ選択します。
  • 新しいインポートは現在のセッションデータを置き換えます（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を開きます。

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

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

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

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

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

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

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

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

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

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

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

ソースモード

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

出力形式

  • WOFF2、WOFF、TTF / OTF (original outlines) を任意に組み合わせて選択
  • 可変フォントでは、Export パネルの Variable Font セクションで全軸を保持するか、静的インスタンスをサブセットとWebパッケージ出力に焼き込めます。

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 (original outlines) / TTF (TrueType outlines) / OTF (PostScript outlines)

11. 現在の制限

  • サブセット生成は一度に1つのソースフォント、または選択した1つのTTC/OTCフェイスに対応
  • サブセット出力は元のアウトライン形式を保ちます（TrueType → .ttf、CFF/CFF2 → .otf）。WOFF と WOFF2 はWebフォントコンテナです。
  • Export パネルから静的インスタンスを Font Subset と Web Package の出力に焼き込めます。
  • Font Builderのソースフォント編集は静的TrueTypeベースのフォントに対応
  • Font BuilderのSVG入力はアウトライン化された静的素材である必要がある
  • Text to SVGは利用可能なすべての可変軸を使用し、対応するカラーグリフを保持します。静的フォントインスタンスは作成しません。