npm install gen-font-face -g
or
npx gen-font-face
Usage: gen-font-face [options]
Options:
-c, --config <dir> Config dir
-p, --prefix <prefix> Prefix for font files
-d, --dir <dir> Parsing dir
-o, --output <dir> Output dir
-h, --help display help for command
- When set config.json file you add specific font-weight, font-style
- If skip this file, default is only set
dir
andoutput
{
"dir" // Specify the directory to parse
"prefix" // Specify the prefix of the font url (Default is dir)
"weight" // font-weight offset
"style" // Additional font style
"output" // Specify the output directory
}
Config file.
Specify the directory to parse.
Specify the prefix of the font url.
Specify the output directory.
{
"dir": "fonts", // Specify the directory to parse
"prefix": "public/fonts", // Specify the prefix of the font url (Default is dir)
"weight": {
// font-weight offset
"Thin": 100,
"Light": 300,
"Regular": 400
},
"style": {
// Additional font style
"font-display": "swap"
},
"output": "dist" // Specify the output directory
}
Above this json file font.css write like this
@font-face {
font-family: 'FontName';
src: url('public/fonts/FontName.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'FontNameWithWeight';
src: url('public/fonts/FontNameWithWeight-Thin.woff2') format('woff2');
font-weight: 100;
font-display: swap;
}
@font-face {
font-family: 'FontNameWithWeight';
src: url('public/fonts/FontNameWithWeight-Light.woff2') format('woff2');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'FontNameWithWeight';
src: url('public/fonts/FontNameWithWeight-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}