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.

Example

Prerequisite

• Gulp installed Globally

Clong the gulp plugin

In your desire folder, run

git clone https://github.com/aui/gulp-font-spider.git

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');
	  src:
	      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;
	}

	.text{
		font-family: 'NotoSansSC-Regular';
	}
</style>

<div class="text">
	度部名高设色一车规各议织村切奇里信属以等包几委速这据四量是专根由影元流她手龙A史手器王公人报整院法则史文立之别示可年着者改手内奇秩给再指全世常解全油先京公思出标月杰边次手成日资化求候样行该打
</div>

Intall node dependency

via npm: npm install
via yarn: yarn install

Run the tool

gulp

Result

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
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

Font Editor: FontCreater

Ideal for viewing font files