gen-font-face

Installation

npm install gen-font-face -g

or

npx gen-font-face

Usage

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

Options

Using config.json

• When set config.json file you add specific font-weight, font-style
• If skip this file, default is only set dir and output

{
  "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
}

-c, --config (Default: ./config.json)

Config file.

-d, --dir (Default: fonts directory)

Specify the directory to parse.

-p, --prefix (Default: --dir option)

Specify the prefix of the font url.

-o, --output (Default: Directory to parse (fonts))

Specify the output directory.

Example

{
  "dir": "fonts",
  "prefix": "public/fonts",
  "weight": {
    "Thin": 100,
    "Light": 300,
    "Regular": 400
  },
  "style": {
    "font-display": "swap"
  },
  "output": "dist"
}

Above this json file font.css write like this

** If you want apply weight font file name convention must ${fontName}-${weightName} with -

For example FontNameWithWeight-Thin.woff2 file in fonts/ directory. Also json file has weight object and has Thin key in weight object So this font file(FontNameWithWeight-Thin.woff2) written in css file

@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;
}

Demo