ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2