/node-webfont-crusher

Get just the glyphs your site needs from a font.

Primary LanguageJavaScriptMIT LicenseMIT

node-webfont-crusher

Get just the glyphs your site needs from a font.

Example use case:

You have: a TTF, OTF, SVG, WOFF or WOFF2 font.

You want: a tiny subset of the glyphs in some or all of those formats.

For example, Font Awesome is awesome, but it's also huge:

$ du -h ./*
108K FontAwesome.otf
72K  fontawesome-webfont.eot
360K fontawesome-webfont.svg
140K fontawesome-webfont.ttf
84K  fontawesome-webfont.woff
68K  fontawesome-webfont.woff2

That's a big download if you just want one or two glyphs.

All you need to know is the unicode codepoints of the glyphs you want to keep, everything else will be discarded.

There are a bunch of web services that can do this for you, but I wanted something more programmatic.

Strictly speaking, you don't have to do any crushing. If you leave config.glyphs undefined only conversions will take place.

Usage

You probably want the Grunt plugin. Otherwise there's a rudimentary command line interface. Check out ./bin/cli.js.

If you didn't install with -g you can run webfont-crusher from your node_modules directory (./node_modules/.bin/webfont-crusher).

Just convert

$ webfont-crusher -i ./node_modules/font-awesome/fonts/FontAwesome.otf -o ./

Convert to some specific formats

$ webfont-crusher -i ./node_modules/font-awesome/fonts/FontAwesome.otf \
  -o ./ \
  -f woff -f woff2

Convert to a specific format and crush

$ webfont-crusher -i ./node_modules/font-awesome/fonts/FontAwesome.otf \
  -o ./ \
  -g 0xf2ae -g 61459 \
  -f woff2

$ webfont-crusher -i /usr/share/fonts/TTF/DejaVuSansMono.ttf \
  -o ./ \
  -g '1234567890.,' \
  -f woff2

Convert to a specific format with a different name

$ webfont-crusher -i ./node_modules/font-awesome/fonts/FontAwesome.otf \
  -o ./ \
  -f woff2 \
  -n font-awesome

Convert to a specific formats and get an SCSS partial you can @import

$ webfont-crusher -i /usr/share/fonts/TTF/DejaVuSansMono.ttf \
  -o ./ \
  -f woff2 \
  -s ./_fonts.scss

Caveats

  • EOT is not supported as an input format and OTF is not supported as an output format.

  • The command line interface won't let you pass just numbers right now (-g '1234567890') because it will be interpreted as a codepoint. If you really just want numerals a dodgy workaround is just to include a space so that it will be parsed as a string (-g ' 1234567890').

Special thanks

Really this is just a convenience wrapper around a bunch of other tools. If this project is cool it's because these projects exist:

  • fonteditor-core

    I can't read Chinese but I think it's the backend for Baidu's online font editor.

  • sfnt2woff-zopfli

    An awesome woff encoder/decoder.

  • woff2

    An awesome woff2 encoder/decoder.

  • ttf2woff2

    This project is a Node wrapper around Google's woff2 project. It only allows for encoding (I wanted to be able to encode and decode), but I reused a lot of the code for the woff2 wrapper!

API Reference

Crusher

Kind: global class

new Crusher(config)

Param Type Description
config Object Configuration object.
config.data Object TTF data in fonteditor-core format.
config.destination string Output directory for generated font files.
[config.glyphs] Array.<Object> | undefined An array of strings or unicode codepoints (or both) that you want to keep in the output. Leave undefined to keep all glyphs (convert only).
[config.basename] string | undefined Name that will be given to generated font files. If undefined it will be the same as the input file.
[config.formats] Array.<Object> | undefined An array of strings representing file formats you want to see in the output directory. If undefined all possible conversions will take place.
[config.scss] Array.<Object> | undefined If not undefined, the path to an SCSS file that will be written.
[config.callback] function | undefined Function that will be executed after files have been written.

Reader

Kind: global class

new Reader(config)

Param Type Description
config Object Configuration object.
config.source string Path to the source font file.
config.destination string Output directory for generated font files.
[config.glyphs] Array.<Object> | undefined An array of strings or unicode codepoints (or both) that you want to keep in the output. Leave undefined to keep all glyphs (convert only).
[config.basename] string | undefined Name that will be given to generated font files. If undefined it will be the same as the input file.
[config.formats] Array.<Object> | undefined An array of strings representing file formats you want to see in the output directory. If undefined all possible conversions will take place.
[config.scss] Array.<Object> | undefined If not undefined, the path to an SCSS file that will be written.
[config.callback] function | undefined Function that will be executed after files have been written.

Writer

Kind: global class

new Writer(data, config)

Param Type Description
data Object TTF data in fonteditor-core format.
config Object Configuration object.
config.destination string Output directory for generated font files.
[config.glyphs] Array.<Object> | undefined An array of strings or unicode codepoints (or both) that you want to keep in the output. Leave undefined to keep all glyphs (convert only).
[config.basename] string | undefined Name that will be given to generated font files. If undefined it will be the same as the input file.
[config.formats] Array.<Object> | undefined An array of strings representing file formats you want to see in the output directory. If undefined all possible conversions will take place.
[config.scss] Array.<Object> | undefined If not undefined, the path to an SCSS file that will be written.
[config.callback] function | undefined Function that will be executed after files have been written.

util : object

Helper functions.

Kind: global namespace

util.toArrayBuffer(buffer) ⇒ ArrayBuffer

Turn a Node Buffer into an ArrayBuffer.

Kind: static method of util

Param Type
buffer Buffer

util.toNodeBuffer(arrayBuffer) ⇒ Buffer

Turn an ArrayBuffer into a Node Buffer.

Kind: static method of util

Param Type
arrayBuffer ArrayBuffer

util.resolveHome(_path) ⇒ string

If a path starts with a tilde or $HOME env var, replace it with the user's home directory. This is probably not very robust but as far as I can tell Node doesn't offer a similar utility.

Kind: static method of util
Returns: string - The same path with tildes or $HOME env var resolved (if there were any).

Param Type Description
_path string Some filesystem path.