Generate BMFont texture and spec using msdfgen
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4c4b890 Mar 2, 2018



Converts a .ttf font file into multichannel signed distance fields, then outputs packed spritesheets and a json representation of an AngelCode BMfont.

Signed distance fields are a method of reproducing vector shapes from a texture representation, popularized in this paper by Valve. This tool uses Chlumsky/msdfgen to generate multichannel signed distance fields to preserve corners. The distance fields are created from vector fonts, then rendered into texture pages. A BMFont object is provided for character layout.


$ npm install msdf-bmfont

Unless previously installed you'll need Cairo, since node-canvas depends on it. For system-specific installation view the node-canvas wiki.

You can quickly install the dependencies by using the command for your OS:

OS Command
OS X brew install pkg-config cairo libpng jpeg giflib
Ubuntu sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
Fedora sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel
Solaris pkgin install cairo pkg-config xproto renderproto kbproto xextproto
Windows Instructions on the node-canvas wiki

El Capitan users: If you have recently updated to El Capitan and are experiencing trouble when compiling, run the following command: xcode-select --install. Read more about the problem on Stack Overflow.


Writing the distance fields and font data to disk:

const generateBMFont = require('msdf-bmfont');
const fs = require('fs');

generateBMFont('Some-Font.ttf', (error, textures, font) => {
  if (error) throw error;
  textures.forEach((sheet, index) => {
    fs.writeFile(`sheet${index}.png`, sheet, (err) => {
      if (err) throw err;
  fs.writeFile('font.json', JSON.stringify(font), (err) => {
    if (err) throw err;

Generating a single channel signed distance field with a custom character set:

const generateBMFont = require('msdf-bmfont');

const opt = {
  charset: 'ABC.ez_as-123!',
  fieldType: 'sdf'
generateBMFont('Some-Font.ttf', opt, (error, textures, font) => {


generateBMFont(fontPath, [opt], callback)

Renders a bitmap font from the font at fontPath with optional opt settings, triggering callback on complete.


  • charset (String|Array)
    • the characters to include in the bitmap font. Defaults to all ASCII printable characters.
  • fontSize (Number)
    • the font size at which to generate the distance field. Defaults to 42
  • textureWidth, textureHeight (Number)
    • the dimensions of an output texture sheet, normally power-of-2 for GPU usage. Both dimensions default to 512
  • texturePadding (Number)
    • pixels between each glyph in the texture. Defaults to 2
  • transparent (Boolean)
    • generate texture atlases with a transparent background, instead of white
  • fieldType (String)
    • what kind of distance field to generate. Defaults to msdf. Must be one of:
      • msdf Multi-channel signed distance field
      • sdf Monochrome signed distance field
      • psdf monochrome signed pseudo-distance field
  • distanceRange (Number)
    • the width of the range around the shape between the minimum and maximum representable signed distance in pixels, defaults to 3

The callback is called with the arguments (error, textures, font)

  • error on success will be null/undefined
  • textures an array of Buffers, each containing the PNG data of one texture sheet
  • font an object containing the BMFont data, to be used to render the font

Since opt is optional, you can specify callback as the second argument.


MIT, see for details.