WebFontsはよく使われるようになっています。特にアイコンフォントで便利です。文字サイズさえ指定すれば、大きなサイズでも綺麗に表示されます。しかし作成するのが大変という印象もあります。 そこで使ってみたいのがWebfonts Generatorです。なんとSVGからWebFontsを生成します。

Webfonts Generatorの使い方

Webfonts Generatorのサンプルコードです。TrueTypeやWOFF、EOTといったファイル形式で出力します。

var fs = require('fs')
var path = require('path')
var _ = require('underscore')

var webfontsGenerator = require('../src/index')

var SRC = path.join(__dirname, 'src')
var FILES = _.map(fs.readdirSync(SRC), function(file) {
	return path.join(SRC, file)
})
var OPTIONS = {
	dest: path.join(__dirname, '..', 'temp'),
	files: FILES,
	fontName: 'fontName',
	types: ['svg', 'ttf', 'woff', 'woff2', 'eot'],
	html:  true
}

webfontsGenerator(OPTIONS, function(error) {
	if (error) console.log('Fail!', error)
	else console.log('Done!')
})

一緒にHTMLも出力されるので確認が簡単です。

Webfonts Generatorがあれば、後はSVGファイルさえ用意すれば良いだけです。SVGファイルはIllustratorなどが使えるでしょう。自社サービスのアイコンをSVG化し、さらにWebfonts GeneratorでWebFontsにするのは面白そうです。

Webfonts GeneratorはJavaScript製のオープンソース・ソフトウェア(Public Domain)です。

sunflowerdeath/webfonts-generator: Generator of webfonts from svg icons