Converter from JSON to font variables for CSS

npm install json2fontcss
5 downloads in the last day
55 downloads in the last week
165 downloads in the last month

json2fontcss Build status

Converter from JSON to font variables for CSS

Getting Started

Install the module with: npm install json2fontcss

// Compilation
var json2fontcss = require('json2fontcss'),
    params = {
      chars: [
        {'name': 'github', 'value': 'e0000'},
        {'name': 'twitter', 'value': 'e0001'},
        {'name': 'rss', 'value': 'e0002'}
      fonts: {
        svg: 'public/fonts/font.svg',
        ttf: 'public/fonts/font.ttf',
        eot: 'public/fonts/font.eot',
        woff: 'public/fonts/font.woff'
      fontFamily: 'my-icon-set',
      format: 'stylus'
    stylus = json2fontcss(params);

// Result (Stylus)
$github_font_family = "my-icon-set";
$github_value = "\e0000";
$github = "my-icon-set" "\e0000";
icon($char) {

  &:before {

// Inside of your Stylus
.github-icon {


json2fontcss exposes a single function.

 * Convert font character info into CSS variables
 * @param {Object} params Container for parameters
 * @param {Object[]} params.chars Information about each character mapping
 * @param {String} params.chars.name Variable name for character
 * @param {String} params.chars.value Hexadecimal UTF8 value for character
 * @param {Object} params.fonts Font type keys to font url paths (e.g. {less: '../font.svg'})
 * @param {String} [params.fontFamily="icon-font"] Optional name for font-family
 * @param {String} [params.template="json"] Optional template to generate with
 * @param {Mixed} [params.options={}] Optional options for template
 * @returns {String} Pre-processor ready CSS generated from specified template

Templates are managed via

json2fontcss.templates; // Object containing key-value pairs of template engines
json2fontcss.addTemplate(name, fn); // Utility to add new templates
json2fontcss.addMustacheTemplate(name, tmpl); // Utility to add new mustache templates


Support this project and others by twolfson via gittip.

Support via Gittip


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint your code using grunt and test via npm test.


Copyright (c) 2013 Todd Wolfson

Licensed under the MIT license.

npm loves you