grunt-fontsmith

Grunt plugin for composing SVGs into multiple fonts, a character mapping, and CSS variables

grunt-fontsmith

Grunt plugin for composing SVGs into multiple fonts, a character mapping, and CSS variables.

The use case for this was to have a synchronized and automatically generated variable set between HTML character entities (e.g. &#e002;), CSS variables (e.g. `content: '\e002';), and fonts.

Install this grunt plugin via npm install grunt-fontsmith and add it to your gruntfile:

// Inside of grunt.js/Gruntfile.js 
grunt.loadNpmTasks('grunt-fontsmith');

Currently, there is only the icomoon-phantomjs engine.

This requires installing phantomjs and having it accessible from your path (i.e. phantomjs --version will work).

grunt.initConfig({
  font: {
    all: {
      // SVG files to read in 
      src: ['public/images/icons/*.svg'],
 
      // Location to output CSS variables 
      destCss: 'public/css/icons.styl',
 
      // Location to output fonts (expanded via brace expansion) 
      destFonts: 'public/fonts/icons.{svg,woff,eot,ttf}',
 
      // Multiple CSS outputs supported (generated .styl and .json files) 
      destCss: 'actual_files/font.{styl,json}',
 
      // Alternative formats (1) 
      destCss:[
        'actual_files/font.styl',
        'actual_files/font.json'
      ],
      destFonts: [
        'actual_files/font.svg',
        'actual_files/font.woff',
        'actual_files/font.eot'
      ],
 
      // Alternative formats (2) 
      destFonts: {
        // Override specific engines 
        json: 'actual_files/font.less',
        styl: 'actual_files/font.json'
      },
      destFonts: {
        // Override specific engines 
        'dev-svg': 'actual_files/font.svg',
        woff: 'actual_files/font.waffles',
        eot: 'actual_files/more.like.eof'
      },
 
      // OPTIONAL: Specify CSS format (inferred from destCss' extension by default) 
          // (stylus, less, scss, json) 
      cssFormat: 'json',
 
      // Optional: Custom routing of font filepaths for CSS 
      cssRouterfunction (fontpath) {
        return 'mysubfolder/' + fontpath;
      },
 
      // Optional: Custom naming of font families for multi-task support 
      fontFamily: 'my-icon-font',
 
      // OPTIONAL: Specify CSS options 
      cssOptions: {}
    }
  }
});

Building Block designed by Michael Rowe from The Noun Project

Eye designed by Dmitry Baranovskiy from The Noun Project

Moon designed by P.J. Onori from The Noun Project

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

Support this project and others by twolfson via gittip.

Copyright (c) 2013 Todd Wolfson

Licensed under the MIT license.