Generate webfont through by web

Install

npm install @ztwx/webfont --save

Running

npx cmWebFont start

Generate directly (no server)

Build font files from your svg directory without starting the web server:

npx cmWebFont g

Options:

• -i, --img-dir <path> svg source directory
• -o, --output-dir <path> font output directory
• -f, --config <file> specify configuration file

CLI options take priority; omitted values are read from .cm-webfontrc in the current directory (if neither exists nor options are given, a default .cm-webfontrc is created).

npx cmWebFont g -i icons -o dist

Using the SCSS output

Besides <fontName>.css, each build also emits <fontName>.scss with the same rules, intended for bundler-based projects (vite / webpack):

• Font urls are written as url("#{$webFont_assets_prefix}<fontName>.woff2") — no cache-busting query, so the bundler can resolve and hash the font files correctly.
• $webFont_assets_prefix defaults to "./" and is declared !default; override it to point at where the font files are actually served from:

// modern module syntax
@use "<outputDir>/<fontName>.scss" with (
  $webFont_assets_prefix: "/assets/fonts/"
);

// or legacy @import (assign before importing)
$webFont_assets_prefix: "../fonts/";
@import "<outputDir>/<fontName>.scss";

Then reference icons as usual: <i class="fa fa-xxx">.

Configuration

The initial run will generate .cm-webfontrc in the root directory of your project.

cm-webfontrc file

• outputDir The Directory where CSS and font files are stored
• imgDir Your image storage address
• fontName Font file name
• fontClassName
• formats Font formats

Agent Skill

This repo ships an agent skill (skills/cmwebfont) for drawing SVG icons and building icon fonts. Add it with the skills CLI:

npx skills add zhantewei2/ztwx-webfont

The skill will be installed from the skills/ directory of the repo, ready for your agent to use.