svgからwoff2へ変換するNode.js製「grunt-webfont」

投稿日：

fontcustomがエラーを吐くようになったので、fontforgeを使ったsvgからwoff2へ変換する方法を探しているときの覚書。

環境： CentOS Stream 8, fontforge 20200314, Node.js v18.9.1

最近も更新されている下記Node.js(Grunt)製ツールを試してみた。

ドキュメントに従い依存関係のあるソフトのインストール
# dnf install fontforge ttfautohint

ttfautohintはリポジトリになかった。
そのまま進める。

grunt-webfontをインストールする。
gruntをglobalにインストール済みならgrunt-webfontだけでいい。
# su - node
$ cd /path/to/project/
$ npm install grunt grunt-webfont --save-dev

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'svg-pathdata@1.0.0',
npm WARN EBADENGINE   required: { node: '0.10.*' },
npm WARN EBADENGINE   current: { node: 'v18.9.1', npm: '8.19.3' }
npm WARN EBADENGINE }

WARNINNGが出たけどとりあえず進める。

Gruntfile.jsを作る
$ vi 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がglobalでインストール済みならgruntコマンドで実行できる。
$ grunt

gruntをglobalにインストールしたくないなら、npm runできるようにpackage.jsonを変更。

  "scripts": {
    "grunt": "grunt"
  }

実行してみる。
$ npm run grunt

生成されたicons.htmlを見てみると問題なく変換できている。

fontcustomの代替としては十分だと思う。


【関連記事】