svgからwoff2へ変換：「Fantasticon」→「 FontForge＋grunt-webfont」

投稿日：

久しぶりにsvgからwoff2へ変換したときの覚書。
Gemini 3 Flash Previewと対話。

環境： FreeBSD 14.3-RELEASE-p9, Node.js v24.13.0


1. Fantasticonとは？

Gemini先生に聞いたらFantasticonをお勧めされたので調査。

Fantasticon は、単なるコンバーターではなく、アイコンフォント構築のためのオーケストレーター（まとめ役）。

処理のステップと使用ツール

  1. SVG → SVG Font (svgicons2svgfont)
    複数の SVG ファイルを読み込み、1つの巨大な XML ベースのフォントファイル（SVG Font）にまとめる。
    この段階で、パスデータ（d属性）がフォントのグリフ座標系にスケーリング。
  2. SVG Font → TTF (svg2ttf)
    XML形式の SVG Font を、バイナリ形式の TrueType Font (TTF) に変換。
  3. TTF → WOFF (ttf2woff)
    TTF を zlib で圧縮し、WOFF 形式のヘッダを付与。
  4. TTF → WOFF2 (wawoff2)
     WebAssembly 版のコンバーターを使用して WOFF2 を生成。


なぜ FontForgeなしで変換できるのか？

かつてはSVG からフォントを作るには、FontForge のような C/C++ で書かれたデスクトップアプリを OS にインストールし、Python スクリプト経由で操作するのが一般的。

WOFF2 形式は、Google が開発した Brotli という非常に強力な圧縮アルゴリズムを使用する。
この圧縮ロジックは非常に複雑で、かつては C++ の公式リファレンス実装（google/woff2）を使うしかなかった。

Fantasticon が内部で使っているttf2woff2は、そのGoogle製の C++ コードをWebAssembly （プラットフォーム非依存のバイナリ形式）にコンパイルしたもの。
Node.jsはWebAssemblyを実行できる。


fantasticonをインストール

fantasticonをグローバルにインストール
# npm install -g fantasticon

プロジェクトディレクトリに移動して実行。
# su - node
$ cd /home/httpd/project/fonts/
$ fantasticon ./svg/ -o ./icons/ -t woff2 -p icons

Generating font kit...
✔ 5 SVGs found in ./svg/
✔ Generated icons/icons.woff2
✔ Generated icons/icons.css
✔ Generated icons/icons.html
✔ Generated icons/icons.json
✔ Generated icons/icons.ts
Done

一部のsvgの変換が上手くいっていない。
と思ったら昔fantasticonを試していた。
参考： svgからウェブフォントwoff2に変換するNode.js製ツール

fantasticonを削除。
# npm uninstall -g fantasticon


２．やっぱりFontForgeをインストール

前の記事を参考に。
参考： svgからwoff2へ変換するNode.js製「grunt-webfont」

pkg経由で検索してインストール。
# pkg search fontforge

fontforge-20230101_2           Type 1/TrueType/OpenType/bitmap font editor

# pkg search ttfautohint

py311-ttfautohint-py-0.5.1_1   Python wrapper for ttfautohint
ttfautohint-1.8.4              Automatic font hinting library

# pkg install fontforge ttfautohint

確認。
# fontforge --version

Copyright (c) 2000-2026. See AUTHORS for Contributors.
 License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
 with many parts BSD <http://fontforge.org/license.html>. Please read LICENSE.
 Version: 20230101
 Based on sources from 2026-04-07 13:28 UTC-ML-D-GDK3.
fontforge 20230101
build date: 2026-04-07 13:28 UTC


３．grunt-webfontをインストールしてwoff2へ変換

Grunt CLI をグローバルにインストール
# npm install -g grunt-cli

プロジェクトディレクトリへ移動してインストール実行。
# su - node
$ cd /path/to/project/
$ npm install grunt grunt-webfont --save-dev

Gruntfile.jsを作る
$ vim Gruntfile.js

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-webfont');

  grunt.initConfig ({
    webfont: {
      icons: {
        src: 'fonts/svg/*.svg',
        dest: 'fonts/icons',
        options: {
          font: 'icons',
          fontFilename: 'icons_{hash}',
          types: 'woff2,woff'
        }
      }
    }
  });

  grunt.registerTask('default', ['webfont']);
}

gruntコマンドで実行。
$ grunt

(node:4722) V8: /home/httpd/hoge/node_modules/ttf2woff2/jssrc/ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib
(Use `node --trace-warnings ...` to show where the warning was created)
Running "webfont:icons" (webfont) task
Font icons_5c9f236be3360d55618f68b72c04fbb1 with 5 glyphs created.

Warningが出力されたけど、無事svgをwoff2へ変換できた。


▼ 関連記事