Skip to content
Smart webfont compression and format conversion tool
Branch: master
Clone or download
Latest commit 596778e Apr 28, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin 显示字符个数 May 20, 2016
test 增加内联字体测试用例 Oct 12, 2017
.jshintrc 更新配置文件 Apr 8, 2016
.travis.yml 重命名配置文件 Apr 16, 2016
LICENSE 开源协议 Apr 10, 2016 Update Apr 28, 2018
package.json v1.3.4 fix bug: #117 #118 #119 Feb 13, 2017


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


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\\.css$" 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.

[Link] 让 font-spider 支持 js 动态内容

[AD] 前端招聘:在海边写代码

You can’t perform that action at this time.