How to Compress and Use Custom Chinese Web Fonts with Font‑Spider‑Plus

With modern web technologies, pages often use custom fonts, and the CSS3 @font-face rule lets you embed fonts even when they are not installed on the user’s device.

Supported Font Formats

EOT is preferred by IE, while other browsers favor TTF, SVG, and WOFF.

@font-face {
    font-family: <font-name>;
    src: url('<path-to-font>');
    font-variant: <value>;
    font-stretch: <value>;
    font-style: <value>;
    font-weight: <value>;
}

Example @font-face Rule

@font-face {
    font-family: 'Lora';
    src: url('../fonts/STKaiti.eot'); /* IE9 Compat Modes */
    src: url('../fonts/STKaiti.eot?#iefix') format('embedded-opentype'),
         url('../fonts/STKaiti.woff2') format('woff2'),
         url('../fonts/STKaiti.woff') format('woff'),
         url('../fonts/STKaiti.ttf') format('truetype'),
         url('../fonts/STKaiti.svg#STKaiti') format('svg');
    font-style: normal;
    font-weight: normal;
}

body {
  font-family: STKaiti;
  ...
}

Testing shows the fonts work in Chrome, Firefox, and IE7‑IE11.

Why Chinese Fonts Are Large

Chinese character sets contain thousands of glyphs (e.g., GB2313 has 7,445 characters), making font files tens of times larger than Latin fonts.

Solution: Subset Fonts with font‑spider‑plus

Two tools are available: the original font‑spider (Node.js CLI) and the improved font‑spider‑plus . The latter offers better compatibility and more features.

Step 1: Create an HTML File

<div class="test">Your site content</div>
<style>
  @font-face {
    font-family: 'font';
    src: url('../fonts/<font>.eot');
    src: url('../fonts/<font>.eot?#font-spider') format('embedded-opentype'),
         url('../fonts/<font>.woff2') format('woff2'),
         url('../fonts/<font>.woff') format('woff'),
         url('../fonts/<font>.ttf') format('truetype'),
         url('../fonts/<font>.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  .test { font-family: 'font'; }
</style>

Step 2: Install font‑spider‑plus

$ npm i font-spider-plus -g

Step 3: Compress the Font

$ fsp local index/index.html

The command creates compressed files (eot, woff, woff2, ttf, svg) in the fonts directory and moves the original large file to fonts/.font-spider.

$ ll fonts/
STKaiti.eot   7.7K
STKaiti.svg   7.7K
STKaiti.ttf   7.6K
STKaiti.woff  7.7K
STKaiti.woff2 3.9K

Step 4: Generate CSS (or Base64‑encoded CSS)

#!/bin/bash
font=STKaiti

eot=$(cat fonts/$font.eot|base64|tr -d '
')
woff=$(cat fonts/$font.woff|base64|tr -d '
')
woff2=$(cat fonts/$font.woff2|base64|tr -d '
')
ttf=$(cat fonts/$font.ttf|base64|tr -d '
')
svg=$(cat fonts/$font.svg|base64|tr -d '
')

cat > fonts-zh.css <<EOF
@font-face {
    font-family: '$font';
    src: url(data:application/font-eot;charset=utf-8;base64,$eot) format('eot');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: '$font';
    src: url(data:application/font-woff2;charset=utf-8;base64,$woff2) format('woff2'),
         url(data:application/font-woff;charset=utf-8;base64,$woff) format('woff'),
         url(data:application/font-ttf;charset=utf-8;base64,$ttf) format('truetype'),
         url(data:application/font-svg;charset=utf-8;base64,$svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
EOF

The generated fonts-zh.css contains all necessary @font-face rules without external files.

Step 5: Include the CSS in Your Site

Copy fonts-zh.css to your static assets (e.g., static/css/) and add a <link> tag in the page head:

<link rel="stylesheet" href="{{ "css/fonts-zh.css" | absURL }}" />

Then set the body’s font family, for example: body { font-family: STKaiti, Cambria; } After these steps, the website uses a lightweight Chinese font, improving load speed.

References

How to Elegantly Use Chinese Fonts on Web Pages

font‑spider: Love @font‑face Custom Fonts