Fontello とは

Fontelloは、SVGベクターファイルからカスタムアイコンフォントを構築できる高性能なWebユーティリティです。Font Awesomeのような巨大なライブラリとは異なり、必要なアイコンのみを選択または独自のSVGをアップロードすることで、バンドルサイズを大幅に削減できます。CSS、WOFF、EOT、TTFファイルを自動生成し、クロスブラウザ互換性を確保します。未使用のグリフを排除してWebパフォーマンスを最適化し、HTTPリクエストを最小限に抑えるため、軽量でパフォーマンスの高いUIアーキテクチャを追求するフロントエンドエンジニアにとって不可欠なツールです。

Fontello の主な機能

カスタムアイコンのサブセット選択

アプリケーションに必要な特定のグリフのみを選択可能です。数千の未使用アイコンを除外することで、フォントファイルサイズを数百KBから数KBまで削減できます。この詳細な制御はCore Web Vitalsを直接改善し、特に重要なアセットのペイロードサイズを最小化することでLargest Contentful Paint (LCP)時間を短縮します。

SVGからフォントへの変換

ベクターSVGパスを標準的なフォント形式（WOFF、WOFF2、TTF、EOT）に変換する堅牢なエンジンを搭載しています。パスの正規化と座標スケーリングを自動処理し、あらゆる解像度で鮮明にレンダリングします。これはDOMで生のSVGを使用するよりも優れており、標準のCSSプロパティ（colorやfont-sizeなど）で色やサイズを簡単に操作できます。

自動CSS生成

ダウンロード時に、必要な@font-face宣言とクラス定義を含むすぐに使えるCSSファイルを提供します。アイコンの配置、行の高さの調整、垂直方向の配置のためのボイラープレートCSSを手動で記述する手間を省きます。生成されたコードはモダンブラウザ向けに最適化されており、複雑なポリフィルなしでChrome、Firefox、Safari、Edge間で一貫したレンダリングを保証します。

Unicodeマッピング制御

各アイコンのUnicodeマッピングを完全に制御できます。これは、特定の文字コードが既に予約されているレガシーシステムや複雑なデザインシステムにアイコンを統合する開発者にとって重要です。手動でコードを割り当てることで、文字の衝突を防ぎ、既存のタイポグラフィスタックと予期せぬ動作なしにシームレスに統合できます。

クロスプラットフォーム互換性

複数のフォント形式を同時に生成し、最大限のブラウザ互換性を確保します。モダンブラウザでは圧縮率に優れたWOFF2が推奨されますが、レガシー環境をサポートするためにEOTやTTFなどの古い形式も含まれています。これにより、最新のスマートフォンから古いデスクトップブラウザまで、ビルド時の追加変換ツールなしでUIの一貫性を維持できます。

Fontello の使い方

fontello.comにアクセスし、統合されたアイコンコレクションを閲覧するか、独自のSVGファイルを「Custom Icons」タブにドラッグ＆ドロップします。必要なアイコンをクリックして選択すると、赤くハイライトされます。「Customize Names」タブでアイコン名を変更し、スタイルシートで使用するCSSクラス名を定義します。「Customize Codes」タブで、既存の文字セットとの競合を避ける必要がある場合は、アイコンを特定のUnicode文字にマッピングします。右上の赤い「Download webfont」ボタンをクリックして、生成されたフォントとCSSを含むZIPアーカイブをダウンロードします。ファイルをプロジェクトディレクトリに展開し、生成されたCSSファイルをHTMLにリンクして、クラス名を使用してアイコンの使用を開始します。

Fontello の利用シーン