Subsetting Chinese Font File(Google Noto Sans CJK) for the web

Subsetting Chinese Font File(Google Noto Sans CJK) for the web

The Font: NotosansCJK

Download Free Google Noto sans font

Font Format Convertor

An online Tool to convert the original OpenType Font(.otf) file to TrueType Font(.ttf)

Subsetting Tool: font-spider

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

The tool will subset and generate font files based on the content in the HTMLs with the intial TrueType Fonts(.ttf) file.

It also provides a plugin to use with Gulp(see below example) or Grunt.



  • Gulp installed Globally

Clong the gulp plugin

In your desire folder, run

git clone

Add a html file

Create a folder test, then create an index.html file with the below content

<style type="text/css">
	@font-face {
	  font-family: 'NotoSansSC-Regular';
	  src: url('../NotoSansSC-Regular.eot');
	      url('../NotoSansSC-Regular.eot?#font-spider') format('embedded-opentype'),
	      url('../NotoSansSC-Regular.woff2') format('woff2'),
	      url('../NotoSansSC-Regular.woff') format('woff'),
	      url('../NotoSansSC-Regular.ttf') format('truetype'),
	      url('../NotoSansSC-Regular.svg') format('svg');
	  font-weight: normal;
	  font-style: normal;

		font-family: 'NotoSansSC-Regular';

<div class="text">

Intall node dependency

via npm: npm install
via yarn: yarn install

Run the tool



Five subsetted font files will be generated

  • .eot
  • .woff2
  • .woff
  • .ttf
  • .svg

Noted: the initial .ttf file will be replaced by the newly generated subset file.

Other inofrmation

Font Weight and Font Name Convension

Value Common weight name
100Thin (Hairline)
200Extra Light (Ultra Light)
600Semi Bold (Demi Bold)
800Extra Bold (Ultra Bold)
900Black (Heavy)

Font Editor: FontCreater

Ideal for viewing font files