Just a scaffold to use FontSpider easily.
You should have git, node, and yarn installed on your system. Then clone the repository and install dependencies.
git clone https://github.com/moesoha/fontspider-scaffold.git
yarn
Put your files, css, fonts and etc in ./src
, then use yarn build
to generate your webfonts. Final files are in ./dist
. Notice only the ./src/*.html
files will be analyzed, or you can modify gulpfile.js
on your own.
There are 4 common types of webfont, eot
, woff
, ttf
and svg
. For best compatibility, you can use CSS like this:
@font-face {
font-family: 'Source Han Serif CN';
src: url('../fonts/SourceHanSerifCN-Medium.eot');
src:
url('../fonts/SourceHanSerifCN-Medium.eot?#font-spider') format('embedded-opentype'),
url('../fonts/SourceHanSerifCN-Medium.woff') format('woff'),
url('../fonts/SourceHanSerifCN-Medium.ttf') format('truetype'),
url('../fonts/SourceHanSerifCN-Medium.svg') format('svg');
}
Remove one src
property if you don't want generate that type of the font.
FontSpider will analyze which characters to be included in the final font by CSS selectors in HTML. You only need to make sure the TTF file exists and other three will be generated. OTF file should be converted to TTF first.
One example is located in ./example
, copy files in it to ./src
and then run yarn build
. You will see a subset Noto Sans with 7 chars (JSahino
) selected by <p>
and a subset Cascadia Code with 9 chars (,.Hdelorw
) available in ./dist/fonts
.