Macフォントエディター：既存フォントにグリフを追加・置換する方法
Leibniz Li
@leibnizliプロジェクトにほぼ完璧なフォントを見つけたのに、重要なグリフが足りないことに気付いた経験はありませんか？会社のロゴをアイコンとして追加したい場合や、既存の文字を少し変更したSVGに置き換えたい場合もあるでしょう。
従来、既存フォントにグリフを追加・置換するには、重いプロ仕様のフォントデザインソフトへファイルを読み込む必要がありました。単純な置換には大げさなうえ、内部のフォントテーブルや元のグリフIDを壊し、本番環境で予期しない表示問題を起こすこともあります。
フォントデータを壊さずにグリフを追加・置換できる高速なネイティブMacツールをお探しなら、**WebFont**が最適なローカルワークフローを提供します。
既存フォントを変更する理由
フォントをゼロから作り直すより、既存フォントを調整した方が実用的な場面はたくさんあります。
- 独自ブランドの追加：標準Webフォントにアプリのロゴやカスタムアイコンを組み込みます。
- 問題のある文字の置換：特定のUIで読みやすくするため、紛らわしい「I」や「l」などの字形を置き換えます。
- 不足している文字の補完：フォールバックフォントへ切り替えずに、文字セットの不足を補います。
Macでグリフを追加・置換する方法
WebFontのソースフォント編集機能は、SVGアートワークを使って既存フォントを正確に変更するために設計されています。WebFontはmacOS上で完全にローカル動作するため、フォントファイルがクラウドへアップロードされることはなく、プライバシーとライセンス遵守を守れます。
1.ソースフォントを読み込む
既存の静的TrueTypeベースのソースフォントをWebFontへ読み込みます。アプリは重要な内部データを保持しながらフォント構造を解析します。
2.カスタムSVGを準備する
IllustratorやFigmaなど好きなベクターソフトで不足している文字や置換アイコンを描き、アウトライン化したSVGとして書き出します。既存文字とぴったり揃えるため、読み込んだフォントのベースラインと境界線ガイドを含むSVGテンプレートをWebFontからダウンロードできます。
3.文字を追加・置換する
目的に応じて、WebFontには2つのワークフローがあります。
- 新しいグリフを追加：カスタムSVGをWebFontへドロップします。アプリがUnicode値を自動で割り当て、新しいグリフ項目を生成します。
- 既存グリフを置換：読み込んだソースフォントから置き換えたい文字を選び、新しいSVGを指定します。
WebFontでソースフォントを編集すると、置換グリフIDを完全に安定させるよう動作します。そのため、高度なOpenType機能やカーニングペアが不必要に壊れることはありません。
4.プリフライトチェックを実行して書き出す
書き出し前に、WebFontが包括的なプリフライトチェックを実行します。Unicodeの競合、重複するグリフ名、空のSVGパスを自動検出し、新しいアートワークがフォントの想定するアセンダーやディセンダーの範囲を超えた場合も警告します。
検証が終わったら、変更したフォントを新しいTTF、WOFF、WOFF2ファイルとして書き出せます。Web用アセットを準備する場合は、@font-face CSSとHTMLデモページを含むWeb Packageも生成でき、新しいグリフをブラウザーですぐに確認できます。
オフラインでフォントを編集する安全な方法
フォントの変更に専門家レベルの知識は必要ありません。新しいアイコンを追加したり壊れた文字を置き換えたりしたいだけなら、ソースファイルを尊重し、重い処理をローカルで行うツールが必要です。
Mac向けWebFontをダウンロードして、フォントの変更、サブセット化、カスタムフォント作成を安全にオフラインで始めましょう。