Browser font-face generator for creating browser usable fonts from ttf's or otf's


From a ttf or otf, generate the required ttf, eot, woff, svg and css for the font to be used in browsers.

npm install --save-dev fontfacegen
  • fontforge
  • ttf2eot
  • batik-ttf2svg
brew install fontforge ttf2eot batik

Help is required to get fontfacegen running on Window and Linux. Any documentation on running on these platforms would be greatly appreciated.

var fontfacegen = require('fontfacegen');

var result = fontfacegen({
    source: '/path/to/source.{ttf,otf}',
    dest: '/destination/folder/',

Path to the source font file in ttf or otf format.

Path to the destination folder for the converted fonts to be placed in.

Path to the destination file to write the generated stylesheet to.

Default = null (Guess the css filename from the font filename)

Path to the font files relative to the css generated.

Default = ''

Append the source filename to the destination directory in order to collate generated fonts into separate directories.

Default = false


options = {
    source: 'src/fonts/ariel.ttf',
    dest: 'dist/fonts/',
    collate: true

Will create fonts into 'dist/fonts/ariel/'.

Type: array Default: [] Valid values: ['woff', 'ttf']

Type of fonts to embed directly into the generated css file as a data-uri instead of creating files for them.

Font name, style and weight can be specified manually per font in a json file of the same name as the font.

For example, for the font: fonts/sans.ttf the config file would be: fonts/sans.json.

Example file format:

    "name"   : "Super Sans",
    "weight" : "400",
    "style"  : "normal"

Note: If present, the json config file must be valid json.

var fs          = require('fs');
var path        = require('path');
var fontfacegen = require('./fontfacegen');

var source = 'tmp/';
var dest   = 'tmp/dest/';
var fonts  = fs.readdirSync(source);

for (var i = fonts.length - 1; i >= 0; i--) {
    var font = fonts[i];
    var extension = path.extname(font);
    var fontname = path.basename(font, extension);

    // Test with embedded ttf
    if (extension == '.ttf' || extension == '.otf') {
            source: path.join(source, font),
            dest: dest,
            css_fontpath: '../fonts/',
            embed: ['ttf'],
            collate: true