πŸ“± Try a glyph viewer right now in your browser!

Utilities and a CLI for extracting glyphs and metadata from font files.

Currently allows loading TrueType or OpenType fonts or font collections, and extracting metadata and glyph geometry.

The command-line interface allows for extracting black-and-white, grayscale, and signed distance field PNG renderings, and JSON metadata.

Run the command-line interface without arguments to check all the available options.

Run via npx: npx @hlorenzi/font

Install with: npm install @hlorenzi/font

Command-line Examples

# Extracts all glyphs from "arial.ttf" into PNG and JSON files.
npx @hlorenzi/font arial.ttf -o "output/unicode_[unicode]"

# Set glyph range.
npx @hlorenzi/font arial.ttf -o "output/unicode_[unicode]" --glyphs="u+30..u+39"

# Set output mode.
npx @hlorenzi/font arial.ttf -o "output/unicode_[unicode]" --img-mode="png-sdf"

Package Example

import { FontCollection, GlyphRenderer } from "@hlorenzi/font"
import fs from "fs"

// Load font file.
const fontBuffer = fs.readFileSync("arial.ttf")

// Load font collection and get first font.
const fontCollection = FontCollection.fromBytes(fontBuffer)
const font = fontCollection.fonts[0]

// Find glyph for Unicode character "a" and get its geometry,
// simplifying each bΓ©zier curve into 100 line segments.
const glyphIndex = font.getGlyphIndexForUnicode("a".charCodeAt(0))
const glyphGeometry = font.getGlyphGeometry(glyphIndex, 100)

// Render into a black-and-white buffer with scale factor 1 EM = 30 pixels,
// then crop empty borders and print to the console.
const glyphImage = GlyphRenderer.render(glyphGeometry, 30).cropped()

Font JS

πŸ”  Visually inspect .otf/.ttf/.otc/.ttc glyphs online, and extract glyph images and metadata through the command line! --

Font JS Info

⭐ Stars 12
πŸ”— Source Code
πŸ•’ Last Update 8 months ago
πŸ•’ Created 4 years ago
🐞 Open Issues 0
βž— Star-Issue Ratio Infinity
😎 Author hlorenzi