Segment

A custom display font, packaged for web distribution.

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

Quick start

npm install segment-font

@import "segment-font/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 <repo-url> segment-font
cd segment-font
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 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 segment-font

Available subpath exports:

Import	File
segment-font / .../css	dist/segment.css
segment-font/woff2	dist/segment.woff2
segment-font/woff	dist/segment.woff
segment-font/ttf	dist/segment.ttf
segment-font/svg	dist/segment.svg
segment-font/glyph-map	dist/glyph-map.json

Direct file reference

<link rel="preload" href="/segment-font/dist/segment.woff2"
      as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/segment-font/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.
• Font conversion & packaging: Darko Bozhinovski — converted the original SVG design into a distributable web font.

License

SIL Open Font License 1.1.