# fontmin **Minify font seamlessly** [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Downloads][downloads-image]][npm-url] [![Dependencies][dep-image]][dep-url] [![Font support][font-image]][font-url] ## Homepage - [简体中文](http://ecomfe.github.io/fontmin/) - [繁體中文](http://ecomfe.github.io/fontmin/tw) - [日本語](http://ecomfe.github.io/fontmin/jp) - [한국어](http://ecomfe.github.io/fontmin/kr) - [English](http://ecomfe.github.io/fontmin/en) ## Install ```sh $ npm install --save fontmin ``` ## Usage ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .src('fonts/*.ttf') .dest('build/fonts'); fontmin.run(function (err, files) { if (err) { throw err; } console.log(files[0]); // => { contents: } }); ``` You can use [gulp-rename](https://github.com/hparra/gulp-rename) to rename your files: ```js var Fontmin = require('fontmin'); var rename = require('gulp-rename'); var fontmin = new Fontmin() .src('fonts/big.ttf') .use(rename('small.ttf')); ``` ## API ### new Fontmin() Creates a new `Fontmin` instance. ### .src(file) Type: `Array|Buffer|String` Set the files to be optimized. Takes a buffer, glob string or an array of glob strings as argument. ### .dest(folder) Type: `String` Set the destination folder to where your files will be written. If you don't set any destination no files will be written. ### .use(plugin) Type: `Function` Add a `plugin` to the middleware stack. ### .run(cb) Type: `Function` Optimize your files with the given settings. #### cb(err, files, stream) The callback will return an array of vinyl files in `files` and a Readable/Writable stream in `stream` ## Plugins The following plugins are bundled with fontmin: * [glyph](#glyph) — Compress ttf by glyph. * [ttf2eot](#ttf2eot) — Convert ttf to eot. * [ttf2woff](#ttf2woff) — Convert ttf to woff. * [ttf2svg](#ttf2svg) — Convert ttf to svg. * [css](#css) — Generate css from ttf, often used to make iconfont. * [svg2ttf](#svg2ttf) — Convert font format svg to ttf. * [svgs2ttf](#svgs2ttf) — Concat svg files to a ttf, just like css sprite. * [otf2ttf](#otf2ttf) — Convert otf to ttf. ### .glyph() Compress ttf by glyph. ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .use(Fontmin.glyph({ text: '天地玄黄 宇宙洪荒', hinting: false // keep ttf hint info (fpgm, prep, cvt). default = true })); ``` ### .ttf2eot() Convert ttf to eot. ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .use(Fontmin.ttf2eot()); ``` ### .ttf2woff() Convert ttf to woff. ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .use(Fontmin.ttf2woff({ deflate: true // deflate woff. default = false })); ``` ### .ttf2svg() Convert ttf to svg. you can use [imagemin-svgo](https://github.com/imagemin/imagemin-svgo) to compress svg: ```js var Fontmin = require('fontmin'); var svgo = require('imagemin-svgo'); var fontmin = new Fontmin() .use(Fontmin.ttf2svg()) .use(svgo()); ``` ### .css() Generate css from ttf, often used to make iconfont. ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .use(Fontmin.css({ fontPath: './', // location of font file base64: true, // inject base64 data:application/x-font-ttf; (gzip font with css). // default = false glyph: true, // generate class for each glyph. default = false iconPrefix: 'my-icon', // class prefix, only work when glyph is `true`. default to "icon" fontFamily: 'myfont', // custom fontFamily, default to filename or get from analysed ttf file asFileName: false, // rewrite fontFamily as filename force. default = false local: true // boolean to add local font. default = false })); ``` Alternatively, a transform function can be passed as `fontFamily` option. ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .use(Fontmin.css({ // ... fontFamily: function(fontInfo, ttf) { return "Transformed Font Family Name" }, // ... })); ``` ### .svg2ttf() Convert font format svg to ttf. ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .src('font.svg') .use(Fontmin.svg2ttf()); ``` ### .svgs2ttf() Concat svg files to a ttf, just like css sprite. awesome work with [css](#css) plugin: ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .src('svgs/*.svg') .use(Fontmin.svgs2ttf('font.ttf', {fontName: 'iconfont'})) .use(Fontmin.css({ glyph: true })); ``` ### .otf2ttf() Convert otf to ttf. ```js var Fontmin = require('fontmin'); var fontmin = new Fontmin() .src('fonts/*.otf') .use(Fontmin.otf2ttf()); ``` ## CLI ```bash $ npm install -g fontmin ``` ```sh $ fontmin --help Usage $ fontmin [] $ fontmin [] $ fontmin > $ cat | fontmin > Example $ fontmin fonts/* build $ fontmin fonts build $ fontmin foo.ttf > foo-optimized.ttf $ cat foo.ttf | fontmin > foo-optimized.ttf Options -t, --text require glyphs by text -b, --basic-text require glyphs with base chars -d, --deflate-woff deflate woff --font-family font-family for @font-face CSS --css-glyph generate class for each glyf. default = false -T, --show-time show time fontmin cost ``` you can use `curl` to generate font for websites running on PHP, ASP, Rails and more: ```sh $ text=`curl www.baidu.com` && fontmin -t "$text" font.ttf ``` or you can use [html-to-text](https://www.npmjs.com/package/html-to-text) to make it smaller: ```sh $ npm install -g html-to-text $ text=`curl www.baidu.com | html-to-text` && fontmin -t "$text" font.ttf ``` what is more, you can use [phantom-fetch-cli](https://www.npmjs.com/package/phantom-fetch-cli) to generate font for `SPA` running JS template: ```sh $ npm install -g phantom-fetch-cli $ text=`phantom-fetch http://www.chinaw3c.org` && fontmin -t "$text" font.ttf ``` ## Related - [fontmin-app](https://github.com/ecomfe/fontmin-app) - [gulp-fontmin](https://github.com/ecomfe/gulp-fontmin) - [fonteditor](https://github.com/ecomfe/fonteditor) ## Thanks - [imagemin](https://github.com/imagemin/imagemin) - [free chinese font](http://zenozeng.github.io/Free-Chinese-Fonts/) - [浙江民间书刻体][font-url] ## License MIT © [fontmin](https://raw.githubusercontent.com/ecomfe/fontmin/master/LICENSE) [downloads-image]: http://img.shields.io/npm/dm/fontmin.svg [npm-url]: https://npmjs.org/package/fontmin [npm-image]: http://img.shields.io/npm/v/fontmin.svg [travis-url]: https://travis-ci.org/ecomfe/fontmin [travis-image]: http://img.shields.io/travis/ecomfe/fontmin.svg [dep-url]: https://david-dm.org/ecomfe/fontmin [dep-image]: http://img.shields.io/david/ecomfe/fontmin.svg [font-image]: https://img.shields.io/badge/font-eonway-blue.svg [font-url]: http://weibo.com/eonway