62 glyphs — uppercase A–Z (U+0041–U+005A), lowercase a–z (U+0061–U+007A), and digits 0–9 (U+0030–U+0039). Ships as woff2, woff, ttf, and svg with a ready-to-use CSS file.

Quick start

npm install @42mk/segment

@import "@42mk/segment/css";

.label {
  font-family: "Segment", sans-serif;
}

The imported CSS defines the @font-face and a .segment helper class.

Try it / preview

Clone the repo and run the demo page:

git clone https://github.com/42dotmk/Segment.git segment
cd segment
npm install
npm run build
npm run demo

Then open http://localhost:8080.

The demo (demo/index.html) shows a pangram, a live input tester, and the full A–Z / a–z / 0–9 glyph grid with codepoint labels. It loads fonts directly from dist/, so you must npm run build at least once before starting it.

Any static server works — npm run demo just wraps npx http-server demo.

Install options

As an npm package

npm install @42mk/segment

Available subpath exports:

Import	File
`@42mk/segment` / `.../css`	`dist/segment.css`
`@42mk/segment/woff2`	`dist/segment.woff2`
`@42mk/segment/woff`	`dist/segment.woff`
`@42mk/segment/ttf`	`dist/segment.ttf`
`@42mk/segment/svg`	`dist/segment.svg`
`@42mk/segment/glyph-map`	`dist/glyph-map.json`

Direct file reference

<link rel="preload" href="/@42mk/segment/dist/segment.woff2"
      as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/@42mk/segment/dist/segment.css">

Build from source

npm install
npm run build     # outputs dist/
npm run clean     # removes dist/ and build/

Pipeline: src/svg/*.svg → stroke-expand (oslllo-svg-fixer) → svgicons2svgfont → svg2ttf → ttf2woff + wawoff2 → dist/.

Source SVGs are named {HEX4}-{char}.svg, where the hex prefix is the Unicode codepoint the glyph maps to. Add or replace glyphs by dropping files into src/svg/ using that convention, then rebuild.

Scripts

Command	What it does
`npm run build`	Build all font formats + CSS into `dist/`
`npm run demo`	Serve `demo/` on http://localhost:8080
`npm run clean`	Remove `dist/` and `build/`

Layout

src/svg/              source glyphs (unicode-prefixed filenames)
scripts/              build pipeline
dist/                 built font files + CSS (generated)
demo/                 local preview page
segment_font_export/  original icomoon export (reference only)

Requirements

Node.js 18+ (ESM build scripts).

Credits

Original design: Pavlina Buchevska — designed the original SVG glyphs.
Number glyphs: Mila Jovanovikj — designed the digit glyphs 0–9.
Font conversion & packaging: Darko Bozhinovski — converted the original SVG design into a distributable web font.
Demo page & packaging fixes: Ilija Boshkov — built the demo/landing page and tidied up the npm packaging.