Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
SVG to webfont converter for Grunt
JavaScript Python CSS

This branch is 1 commit ahead, 300 commits behind sapegin:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
tasks
test
.editorconfig
.gitignore
.jscs.json
.npmignore
.travis.yml
Contributing.md
Gruntfile.js
License.md
Readme.md
package.json

Readme.md

SVG to webfont converter for Grunt Build Status

Generate custom icon webfonts from SVG/EPS files via Grunt. Based on Font Custom.

This task will make all you need to use font-face icon on your website: font in all needed formats, CSS/SASS/LESS/Stylus and HTML demo page.

Features

  • Very flexible.
  • Semantic: uses Unicode private use area.
  • Cross-browser: IE8+.
  • BEM or Bootstrap output CSS style.
  • CSS preprocessors support.
  • Data:uri embedding.
  • Ligatures.
  • HTML preview.

Installation

This plugin requires Grunt 0.4.

OS X

brew install fontforge ttfautohint
npm install grunt-webfont --save-dev

You may need to use sudo for brew, depending on your setup.

Linux

sudo apt-get install fontforge ttfautohint
npm install grunt-webfont --save-dev

Note that if ttfautohint is not available in your distribution, your generated font will not be properly hinted.

Configuration

Add somewhere in your Gruntfile.js:

grunt.loadNpmTasks('grunt-webfont');

Inside your Gruntfile.js file add a section named webfont. See Parameters section below for details.

Parameters

src

Type: string|array

Glyphs list: SVG or EPS. String or array. Wildcards are supported.

dest

Type: string

Directory for resulting files.

destCss

Type: string Default: dest value

Directory for resulting CSS files (if different than font directory).

Options

font

Type: string Default: icons Name of font and base name of font files.

hashes

Type: boolean Default: true

Append font file names with unique string to flush browser cache when you update your icons.

styles

Type: string|array Default: 'font,icon'

List of styles to be added to CSS files: font (font-face declaration), icon (base .icon class), extra (extra stuff for Bootstrap (only for syntax = 'bootstrap').

types

Type: string|array Default: 'woff,ttf,eot,svg'

Font files types to generate.

syntax

Type: string Default: bem

Icon classes syntax. bem for double class names: icon icon_awesome or bootstrap for single class names: icon-awesome.

template

Type: string Default: null

Custom CSS template path (see tasks/templates for some examples). Should be used instead of syntax. (You probably need to define htmlDemoTemplate option too.)

stylesheet (default: 'css')

Type: string

Stylesheet type. Can be css, sass, scss, less... If sass or scss is used, _ will prefix the file (so it can be a used as a partial).

relativeFontPath (default: null)

Type: string

Custom font path. Will be used instead of destCss in CSS file. Useful with CSS preprocessors.

htmlDemo

Type: boolean Default: true

If true, an HTML file will be available (by default, in destCSS folder) to test the render.

htmlDemoTemplate

Type: string Default: null

Custom demo HTML template path (see tasks/templates/demo.html for an example) (requires htmlDemo option to be true).

destHtml

Type: string Default: destCss value

Custom demo HTML demo path (requires htmlDemo option to be true).

embed

Type: string|array Default: false

If true embeds WOFF (only WOFF) file as data:uri.

IF ttf or woff or ttf,woff embeds TTF or/and WOFF file.

If there’re more file types in types option they will be included as usual url(font.type) CSS links.

ligatures

Type: boolean Default: false

If true the generated font files and stylesheets will be generated with opentype ligature features. The character sequences to be replaced by the ligatures are determined by the file name (without extension) of the original SVG or EPS.

For example, you have a heart icon in love.svg file. The HTML <h1>I <span class="ligature-icons">love</span> you!</h1> will be rendered as I ♥ you!.

rename

Type: function Default: path.basename

You can use this function to change how file names translates to class names (the part after icon_ or icon-). By default it’s a name of a file.

For example you can group your icons into several folders and add folder name to class name:

options: {
  rename: function(name) {
    // .icon_entypo-add, .icon_fontawesome-add, etc.
    return [path.basename(path.dirname(name)), path.basename(name)].join('-');
  }
}

skip

Type: boolean Default: false

If true task will not be ran. In example, you can skip task on Windows (becase of difficult installation):

skip: require('os').platform() === 'win32'

Config Examples

Simple font generation

webfont: {
  icons: {
    src: 'icons/*.svg',
    dest: 'build/fonts'
  }
}

Custom font name, fonts and CSS in different folders

webfont: {
  icons: {
    src: 'icons/*.svg',
    dest: 'build/fonts',
    destCss: 'build/fonts/css'
    options: {
      font: 'ponies'
    }
  }
}

To use with CSS preprocessor

webfont: {
  icons: {
    src: 'icons/*.svg',
    dest: 'build/fonts',
    destCss: 'build/styles',
    options: {
      stylesheet: 'styl',
      relativeFontPath: '/build/fonts'
    }
  }
}

Embedded font file

webfont: {
  icons: {
    src: 'icons/*.svg',
    dest: 'build/fonts',
    options: {
      types: 'woff',
      embed: true
    }
  }
}

CSS Preprocessors Caveats

You can change CSS file syntax using stylesheet option (see above). It change file extension (so you can specify any) with some tweaks. Replace all comments with single line comments (which will be removed after compilation).

SASS

If stylesheet option is sass or scss, _ will prefix the file (so it can be a used as a partial).

LESS

If stylesheet option is less, regular CSS icon classes will be expanded with corresponding LESS mixins.

The LESS mixins then may be used like so:

.profile-button {
  .icon-profile;
}

Release History

2013-10-23 v0.1.11

2013-10-16 v0.1.10

  • rename option.
  • Quote Base64 strings to prevent errors in Stylus.

2013-09-22 v0.1.9

  • Fix handling pathes with spaces.
  • Font smoothing for Firefox on OS X (by @MoOx).
  • Deprecated md5 Pyhton module replaced with hashlib (by @Nyalab).

2013-08-21 v0.1.8

  • Set glyphs width automatically.

2013-08-21 v0.1.7

2013-08-20 v0.1.6

  • Bug fixes.

2013-06-30 v0.1.5

2013-05-08 v0.1.4

2013-04-30 v0.1.3

  • HTML demo works with CSS preprocessors stylesheets.
  • TTF files embedding (by @katzlbt and me).
  • Don not stop Grunt when font contains no glyphs (by @iham).
  • Better fontforge stdout handling (by @MoOx).

2013-04-13 v0.1.2

  • relativeFontPath option (by @gregvanbrug).
  • template option.
  • Better LESS support (by @gregvanbrug).
  • Better Stylus support.
  • Bug fixes.

2013-03-17 v0.1.1

  • Fix error when generating font with one glyph.

2013-02-18 v0.1.0

  • Grunt 0.4 support.
  • Separate CSS/font destinations (by @scanieso).
  • Minimal CSS preprocessors support (by @MoOx).
  • Updated generator script (by @MoOx and me).
  • Generated CSS not include broken links to font files.
  • Data:uri WOFF files embedding.

License

The MIT License, see the included License.md file.

Something went wrong with that request. Please try again.