Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


  1. Create a new folder and name it whatever you would like.

  2. Navigate to that folder in Terminal, and install npm. (Notes on how to install for Mac: or Windows: or Linux:

  3. Then install grunt-webfont from Install the node engine version without fontforge:
    npm install grunt-webfont --save-dev

  4. Create a Gruntfile.js such as the following below:

    Code Block
    module.exports = function(grunt) {
    // Project configuration.
        pkg: grunt.file.readJSON('"package.json'"),
             webfont: {
                icons: {
                    src: '"icons/*.svg'", // Your local path where the svg files are located.
                    dest: '"src/fonts/'", // Destination path for the font files.
                    destCss: '"src/css/'",
                    options: {
                    	engine: '"node'", // To use the node engine.
                        fontHeight: 52, // Avoid encountering metric-related issues.
                        normalize: false,
                        ascent: 64, // Top height measured from the bottom of the glyph boundary.
                        descent: 0, // Bottom height measured from the bottom of the glyph boundary.
                        font: '"icons'", // Name of the font.
                        destHtml: '"assets/'",
                        templateOptions: {
                            classPrefix: '"icon-'"
        // Load the plugin that provides the “uglify”"webfont" task.
        // Default task(s).
        grunt.registerTask('"default'", ['"webfont'"]);

  5. Run "grunt".

  6. In the folder you created, the following tree structure will appear:

  7. In src > fonts, you will find your icon font file. In icons you will find your .svg icons. The assets folder will contain an icons.html file that will preview the icon font.