Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including font-spider with all npm packages installed. Try it out:

var fontSpider = require("font-spider")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

font-spider v1.3.4

Smart webfont compression and format conversion tool


NPM Version NPM Downloads Node.js Version Build Status

[简体中文] | [English] | [日本語]

Font-spider is a compress tool for WebFont which can analyze your web-page intelligently to find the fonts out which have been used and then compress them.

字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。




  1. Font subsetter: Our tool is based on HTML and CSS analysis and completely running in local so that.
  2. Font converter: Support woff2, woff, eot, svg font format generation.


npm install font-spider -g


step one: code CSS

@font-face {
  font-family: 'source';
  src: url('../font/source.eot');
    url('../font/source.eot?#font-spider') format('embedded-opentype'),
    url('../font/source.woff2') format('woff2'),
    url('../font/source.woff') format('woff'),
    url('../font/source.ttf') format('truetype'),
    url('../font/source.svg') format('svg');
  font-weight: normal;
  font-style: normal;

.home h1, .demo > .test {
    font-family: 'source';

Attention: the ".ttf" file must be existed which is referred in src property of @font-face, and our font-spider will automatically generate other formats of font.

step two: compress WebFont by using font-spider

font-spider [options] <htmlFile1 htmlFile2 ...>


One or more web-page addresses which support the http form.


font-spider dest/news.html dest/index.html dest/about.html

If there were several pages depend on the same fonts, please use --htmlFiles to transfer them in.


Usage: font-spider [options] <htmlFile ...>


  -h, --help                    output usage information
  -V, --version                 output the version number
  --info                        show only webfont information
  --ignore <pattern>            ignore the files
  --map <remotePath,localPath>  mapping the remote path to the local
  --no-backup                   do not back up fonts
  --debug                       enable debug mode

sample of parameters usage

Use the wildcard character to compress the WebFont of several HTML file:

font-spider dest/*.html

--info Show the WebFont that has been used on the website:

font-spider --info

--ignore Ignore the file:

font-spider --ignore "icon\\.cssquot; dest/*.html

--map This parameter will map the WebFont of online page to local and then compress it (the local path must be an absolute path):

font-spider --map ",/Website/font"

Build plugins



  • Only the constant texts and styles are supported, but not the dynamic elements and styles which is inserted by javascript.
  • The ".otf" format fonts should be transfered to ".ttf" format firstly, so that we can start our compressing work.
  • Only the HTML and CSS files which is encoded by utf-8 are supported.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free