WebFont/macOSアプリ
フォント制作に集中
SVGからフォントを作成し、サブセット化・形式変換してWebフォントを公開
WebFont は、テキストから SVG への変換、SVG アートワークからのアイコン／カラーフォント作成、サブセット化、形式変換、Web フォントパッケージ生成をローカルで行える macOS アプリです。
SVGからフォントを作り、テキストからサブセットを生成
WebFontは、テキストのアウトライン化、SVGベースのフォント作成、ソースフォントの置換、サブセット、変換、検証、Webパッケージ生成を1つのローカルmacOSワークフローにまとめます。
テキストとグリフ素材を作る
単語、文章、複数行テキストを、利用可能なすべての可変軸を反映して SVG アウトラインに変換します。アイコンや Web フォント用のアウトライン SVG を準備することもできます。対応するカラーグリフは元の色を保持します。
フォントを作成・編集する
SVGグリフから新しいフォントを作るか、静的TrueTypeベースのソースフォントを読み込み、Unicodeグリフを追加・置換します。
確認して書き出す
プリフライトを実行して生成フォントを検証し、TTF、WOFF、WOFF2、グリフ素材、またはCSS・デモHTML・メタデータを含むWebパッケージを書き出します。
現在のアプリでできること
テキストからSVGアウトライン
読み込んだフォントで文字を SVG パスに変換します。サイズ、利用可能なすべての可変軸、字間、行高、折り返し幅、揃え、余白、フォールバックを調整できます。対応するベクターカラーグリフは元の色を保持し、ビットマップカラーグリフは PNG として埋め込み、単色アートワークには選択した塗り色を使います。Text to SVG は静的フォントインスタンスを書き出しません。
フォントビルダー
静的なSVG素材からモノクロまたはカラーフォントを作成します。カラーモードでは、対応する塗り、線、線形／放射状グラデーション、不透明度をCOLR/CPALで保持し、対応するグラデーション／効果グリフにはSVGフォールバックを提供します。明るい背景用・暗い背景用のパレットを追加し、TTF、WOFF、WOFF2、またはWebパッケージとして書き出せます。
ソースフォント編集
対応する静的で非カラーの TrueType フォントを読み込み、SVG グリフを追加するか既存の Unicode グリフを置き換えます。グリフ ID は維持されます。
事前チェック
エクスポート前にUnicode競合、重複名、空パス、異常なSVGサイズ、メトリクスの問題、対応外SVG機能、複雑すぎる素材を報告します。
プロジェクトファイルとテンプレート
ソースフォントデータ、SVGグリフ、ビルド設定、出力オプション、置換対象を含む.webfontprojectを保存します。描画前にガイド付きSVGテンプレートも書き出せます。
サブセット生成
選択したグリフ、貼り付けたテキスト、.txt ファイル、Unicode プリセットからサブセットを作成。TTF、OTF/CFF/CFF2、WOFF、WOFF2、選択した TTC/OTC のフェイスに対応し、可変フォントとカラーフォントも扱えます。元のアウトラインを保った TTF/OTF、WOFF、WOFF2 を書き出すか、Export パネルで静的インスタンスを焼き込めます。
Webフォント変換
WOFF/WOFF2 の圧縮・展開では元の輪郭、可変軸、カラーデータを保持します。明示的な TTF/OTF ターゲットでは、対応する静的 TrueType ↔ CFF と可変 TrueType（glyf/gvar）↔ CFF2 を変換し、対応する COLR v0/v1・OpenType-SVG のカラー情報も保持します。制限は下表をご覧ください。
Webパッケージと検証
フォントファイル、@font-face CSS、demo.html を書き出します。Font Builder の Web フォントパッケージには metadata.json、グリフプレビュー、HTML スニペットも含まれます。カラーデモは対応時にパレットコントロールを提供し、静的インスタンスの書き出しでは一致する font-weight/stretch/style CSS が生成されます。出力は検証され、Web 形式はデコード往復も確認します。色の表示は出力先のブラウザやアプリに依存します。
カラーグリフのプレビューと書き出し
フォント形式と macOS の描画が対応する範囲で、元の色をプレビューします。CBDT PNG グリフには内蔵ビットマップリーダーもあります。カラーグリフは PNG または PDF に書き出せます。対応する COLR と OpenType-SVG はベクター SVG になり、ビットマップや SVG で正確に表せない効果は SVG 内の PNG に戻ります。
グリフ素材の書き出し
グリフ一覧から1つまたは複数のグリフを選び、SVG、PNG、PDFとして書き出します。サイズと前景色を指定でき、対応するカラーグリフは色を保持します。可変フォントのインスタンス設定はグリフ素材の書き出しには影響しません。
実際のフォント制作
アイコンフォント制作
アウトラインSVGからアイコンフォントを作り、Unicodeに割り当て、Preflight Checkを実行してブラウザ対応パッケージを書き出します。
テキストアートとレタリング
単語、文章、複数行のコピーを、ロゴ、ドキュメント、受け渡し、ポスター、SVGデザイン素材用の実フォントアウトラインへ変換します。
Webフォント最適化
選択グリフやテキストからサブセットを作り、必要なOpenType機能を残し、製品に必要な形式だけを配信します。
フォント公開前の確認
生成した TTF・OTF・WOFF・WOFF2 を検証し、文字のカバー範囲や警告、デモページを確認してから公開できます。
明確なルールで安全な出力
WebFontは、黙って変更するのではなく明示的な動作を重視します。対応していないSVGやフォント機能を報告するため、本番フォントになる前に素材を修正できます。
- Font Builder の SVG はアウトライン化された静的素材である必要があります。ライブテキスト、ラスター画像、フィルター、マスク、スクリプト、アニメーション、外部リソースは受け付けません。カラーモードはパターンと非対応のブレンドも拒否します。
- ソースフォントの直接編集は、対応する静的で非カラーの TrueType フォントに限られます。グリフの追加や置換でも既存のグリフ ID は維持されます。
- サブセットは一度に 1 つのフォント、または選択した TTC/OTC のフェイスから作ります。元の輪郭、可変軸、対応するカラーリソースを保持します。
- Text to SVG は対応するベクターカラーグリフを保持し、ビットマップカラーグリフは PNG として埋め込みます。塗り色は単色アートワークに適用されます。可変軸のコントロールはアートワークだけを変更し、静的フォントファイルは生成しません。
- すべての処理は Mac 上でローカルに実行され、フォントファイルはアプリからアップロードされません。
- 輪郭変換はグリフ ID と対応する COLR v0/v1・CPAL・OpenType-SVG データを保持します。対応する可変フォントは全軸を保持します。元のヒンティングは削除され、曲線の近似により表示やファイルサイズが変わる場合があります。ビットマップや互換性のないレイアウト・可変データは理由を表示して拒否します。
- カラープレビューはフォント形式と macOS の描画対応に依存します。対応する COLR と OpenType-SVG はベクター SVG として書き出され、ビットマップや正確に表せない効果は PNG を埋め込みます。カラーデータを保持しても、すべてのブラウザやアプリで表示できるとは限りません。
- メインのグリフ一覧は可変フォントを既定インスタンスで表示し、軸を識別します。Export パネルでは「すべての軸を保持」で可変フォントを書き出し、「静的インスタンス」で現在の軸値を Font Subset と Web Package の出力に焼き込めます。未指定の軸は既定値に固定され、フォント内部の名前やウェイト／スタイルのメタデータは書き換えられません。
TTF・OTF・Webフォント変換規則対応表
WOFF/WOFF2 はコンテナを変更し、輪郭形式は変更しません。TTF/OTF (original outlines) は TrueType を .ttf、CFF/CFF2 を .otf に復元します。明示的な輪郭ターゲットは静的 TrueType ↔ CFF と条件を満たす可変 TrueType ↔ CFF2 に対応します。輪郭形式が一致する場合はそのまま出力します。単一・一括変換の両方で具体的な失敗理由を表示し、一括処理は継続して成功・失敗件数を集計します。不正なデータや形式の制限により変換できない場合があります。
| 入力形式 | 変換先 | 出力形式 | 対応状況 | 輪郭タイプと変換仕様 |
|---|---|---|---|---|
| TTF | WOFF / WOFF2 | .woff / .woff2 | 対応 | TrueType 輪郭を Web フォントとして圧縮。輪郭形式、可変軸、カラーデータを保持。 |
| OTF (CFF/CFF2) | WOFF / WOFF2 | .woff / .woff2 | 対応 | CFF/CFF2 輪郭を Web フォントとして圧縮。輪郭形式、可変軸、カラーデータを保持。 |
| WOFF / WOFF2 | TTF/OTF (original outlines) | .ttf | 対応 | TrueType 輪郭を .ttf に復元。輪郭形式は変えず、可変軸とカラーデータも保持。 |
| WOFF / WOFF2 | TTF/OTF (original outlines) | .otf | 対応 | CFF/CFF2 輪郭を .otf に復元。輪郭形式は変えず、可変軸とカラーデータも保持。 |
| 静的 TTF | OTF (PostScript outlines) | .otf | 対応（静的フォント） | 静的 TrueType を CFF に変換。COLR v0/v1 と OpenType-SVG を含む。グリフ ID、カラーレイヤー、グラデーション、パレットを保持。2 次曲線を 3 次曲線へ次数上げし、ヒンティングを削除。 |
| 静的 OTF (CFF) | TTF (TrueType outlines) | .ttf | 対応（静的フォント） | 静的 CFF を TrueType に変換。COLR v0/v1 と OpenType-SVG を含む。グリフ ID、カラーレイヤー、グラデーション、パレットを保持。3 次曲線を 2 次曲線で近似し、ヒンティングを削除。 |
| 可変 TrueType ↔ CFF2 | TTF / OTF | .ttf / .otf | 条件付き対応 | 全軸と対応するカラー情報を保持します。輪郭変換自体は軸値を固定しません。固定軸のファイルを書き出すには、Export パネルで「静的インスタンス」を選び、フォントサブセットまたはWebパッケージを生成してください。1～16 軸、最大 48 個の輪郭変化領域、互換性のあるマスター輪郭、解決可能な変化データが必要です。検証、サイズ、座標の制限も適用されます。CFF2 出力が大幅に大きくなる場合があります。 |
| ビットマップカラー（sbix/CBDT/EBDT） | 輪郭の相互変換 | — | 非対応 | ビットマップをベクター輪郭には変換しません。ビットマップを残すには、元の輪郭の書き出しか Web フォント圧縮を使ってください。 |
| TTC / OTC | 単一 / 一括変換 | — | 非対応 | メイン画面でコレクション内の 1 つのフェイスを選び、サブセットを作成してください。 |
| 未対応の可変データ | 輪郭形式の変更 | — | 未対応 | VARC 輪郭、可変軸のある CFF1、fvar のない CFF2、互換性のないマスター、解決できない変化領域、変換上限を超えるフォントは輪郭形式を変更できません。対応する場合は元の輪郭の書き出しや Web 圧縮を使用してください。 |
| 互換性のないレイアウト | 輪郭形式の変更 | — | 未対応 | 一部の旧式 AAT テーブルや元の輪郭点番号を参照するレイアウトデータは安全に変換できません。具体的な理由を表示します。 |