js-font-parser

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #android #deep-learning #linux #docker #nodejs #kubernetes #vue #awesome-list #pytorch #mcp

(★ 18)

a javascript library that parses truetype fonts

js-font-parser Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# JS Font Parser

[![CI](https://github.com/byteface/js-font-parser/actions/workflows/ci.yml/badge.svg)](https://github.com/byteface/js-font-parser/actions/workflows/ci.yml)
[![Quality](https://github.com/byteface/js-font-parser/actions/workflows/quality.yml/badge.svg)](https://github.com/byteface/js-font-parser/actions/workflows/quality.yml)
[![Golden Images](https://github.com/byteface/js-font-parser/actions/workflows/golden-images.yml/badge.svg)](https://github.com/byteface/js-font-parser/actions/workflows/golden-images.yml)
[![Node >=20](https://img.shields.io/badge/node-%3E%3D20-2f6f3e)](https://nodejs.org/)
[![License: ISC](https://img.shields.io/badge/license-ISC-1f4b99)](https://raw.githubusercontent.com/byteface/js-font-parser/master/LICENSE)

A high-quality browser typography engine for JavaScript: parse fonts, shape text, inspect tables, and render glyphs with real outline access.

This project is for:
- browser typography, shaping, layout, and rendering workflows
- font parsing, outline/table inspection, and variable/color font experiments
- demo/tooling workflows where you need direct access to points, contours, metrics, and tables

This project is not a full browser text engine replacement.

## 30-Second Quick Start

```bash
nvm use
npm install
npm run build
npm test
```

Run local pages:

```bash
python3 -m http.server 8080
```

Open:
- `http://localhost:8080/demos/index.html`
- `http://localhost:8080/tools/index.html`

## Install and Use

`js-font-parser` is best thought of as a browser-focused typography engine and font toolkit. It gives you font loading, glyph access, shaping/layout helpers, SVG/canvas rendering helpers, and low-level table access in one package.

### Node / Bundler

```js
import { FontParser } from 'js-font-parser';

const font = await FontParser.load('./font.ttf');
const glyph = font.getGlyphByChar('A');
const svg = font.toSvg('Hello');
font.drawText(canvas, 'Hello', { x: 20, y: 140, scale: 0.12 });
const metadata = font.getMetadata();
```

### Browser Script Tag

```html
<script src="./dist-build/fontparser.min.js"></script>
<script>
  const { FontParser } = window.FontParser;
</script>
```

## Format Support

- TTF: supported
- OTF/CFF: supported
- WOFF: supported
- WOFF2: supported when a decoder is provided at runtime

Core strengths:
- browser typography and direct glyph rendering
- GSUB/GPOS-aware shaping and layout helpers
- outline, metrics, metadata, and table inspection
- variable fonts, color fonts, and creative coding workflows

WOFF2 decoder hook:
- `setWoff2Decoder(...)`, or
- `setWoff2DecoderAsync(...)`, or
- global `WOFF2.decode(...)`

Official browser integration path (used by `tools/woff2.html`): load `wawoff2` and wire `Module.decompress` into `setWoff2Decoder(...)`.

Known-good WOFF2 smoke fixture path:
- `truetypefonts/curated-extra/woff2/NotoSans-Regular-subset.woff2`

## Current Known Gaps

Current top open items are tracked in `docs/WISHLIST.md`.

## API by Task

- Load/parse:
  - `FontParser.load(url)`
  - `FontParser.fromArrayBuffer(buffer)`
- Glyph access:
  - `getGlyph(index)`
  - `getGlyphByChar(char)`
  - `getGlyphIndexByChar(char)`
- Layout/shaping:
  - `layoutString(...)`
  - `layoutStringAuto(...)`
  - GSUB/GPOS paths via parser/layout options
- Metrics/metadata:
  - `getUnitsPerEm()`, `getAscent()`, `getDescent()`
  - metadata convenience API (`name`, `OS/2`, `post`)
- Rendering helpers:
  - font instance methods like `drawGlyph(...)`, `drawColorGlyph(...)`, `drawText(...)`, `drawLayout(...)`, `toSvg(...)`
  - lower-level helpers: `CanvasRenderer`, `SVGFont`

Full API details: `docs/API.md`

## Demos and Tools

- Demos index: `demos/index.html` (creative showcases)
- Tools index: `tools/index.html` (inspection/debug workflows)

Examples:
- `demos/glyph-playground.html`: deformable interactive glyph physics
- `tools/metadata.html`: metadata inspection
- `tools/unicode-coverage.html`: block coverage inspection

## Diagnostics and Error Handling

- Parser and helpers expose structured diagnostics for fallback/unsupported/error paths.
- Repeated diagnostics are deduplicated where appropriate.
- For WOFF2, missing decoder is a controlled runtime error, not silent corruption.

## Development Workflow

Node version:
- `.nvmrc` and `package.json` engines currently target Node `>=20` (CI verifies `20.x`, `22.x`, `24.x`).

Important TS import note:
- Source intentionally keeps `.js` import specifiers in TS files for runtime module resolution after compile.

## Scripts

- `npm run build`: build `dist/` and `dist-build/fontparser.min.js`
- `npm run build:dist`: compile TS to `dist/`
- `npm run build:bundle`: webpack UMD bundle
- `npm test`: fast default suite
- `npm run test:full`: full fixture sweep
- `npm run test:coverage`: coverage report

## Package Contract

- Supported npm entrypoint: `import { ... } from 'js-font-parser'`
- Do not deep-import `dist/...` internals from npm consumers.
- Browser demos in this repo use `dist-build/fontparser.min.js` intentionally.

## Project Docs

- `docs/API.md`
- `docs/RELEASE.md`
- `docs/WISHLIST.md`
- `proj/fontparser/README.md` (CLI in development)
- `tests/golden/README.md`

js-font-parser

js-font-parser Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

js-font-parser

js-font-parser Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README