# modern-font

> JavaScript Font Codec.

Latest version **0.6.4** (published 2026-09-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install modern-font
pnpm add modern-font
yarn add modern-font
bun add modern-font
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.6.4 |
| Published | 2026-09-14 |
| First published | 2024-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 591 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 6 |
| Author | wxm |
| Maintainers | wengxiangmin |
| Keywords | modern-font, font-editor, font-minify, opentype, font |

## Links

- npm: https://www.npmjs.com/package/modern-font
- Repository: https://github.com/qq15725/modern-font
- Issues: https://github.com/qq15725/modern-font/issues
- npm.io page: https://npm.io/package/modern-font

## Dependencies (1)

- [fflate](https://npm.io/package/fflate.md) ^0.8.3

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.6.4 (latest) — 2026-09-14
- 0.6.3 — 2026-07-06
- 0.6.2 — 2026-07-01
- 0.6.1 — 2026-06-17
- 0.6.0 — 2026-05-23
- 0.5.0 — 2026-03-11
- 0.4.4 — 2025-09-26
- 0.4.3 — 2025-09-26
- 0.4.2 — 2025-09-25
- 0.4.1 — 2025-03-31
- 0.4.0 — 2025-01-09
- 0.3.5 — 2024-12-31
- 0.3.4 — 2024-12-09
- 0.3.2 — 2024-11-18
- 0.3.1 — 2024-11-12
- … 13 more at https://npm.io/package/modern-font/versions

## README

<h1 align="center">modern-font</h1>

<p align="center">
  <a href="https://unpkg.com/modern-font">
    <img src="https://img.shields.io/bundlephobia/minzip/modern-font" alt="Minzip">
  </a>
  <a href="https://www.npmjs.com/package/modern-font">
    <img src="https://img.shields.io/npm/v/modern-font.svg" alt="Version">
  </a>
  <a href="https://www.npmjs.com/package/modern-font">
    <img src="https://img.shields.io/npm/dm/modern-font" alt="Downloads">
  </a>
  <a href="https://github.com/qq15725/modern-font/issues">
    <img src="https://img.shields.io/github/issues/qq15725/modern-font" alt="Issues">
  </a>
  <a href="https://github.com/qq15725/modern-font/blob/main/LICENSE">
    <img src="https://img.shields.io/npm/l/modern-font.svg" alt="License">
  </a>
</p>

## Features

- Encode, Decode

- Get glyph path commands

- Format conversion

- Minify

- TypeScript

## 📦 Install

```shell
npm i modern-font
```

## 🦄 Usage

```ts
import { parseSFNTFont } from 'modern-font'

fetch('font.woff')
  .then(rep => rep.arrayBuffer())
  .then((buffer) => {
    const font = parseSFNTFont(buffer)
    const sfnt = font.sfnt

    // SFNT
    console.log(sfnt)

    // Char to SVG Path commands
    console.log(sfnt.getPathCommands('A', 0, 0))
  })
```

## 🅰️ Fallback font

`Fonts` falls back to a designated font whenever a requested family is missing.
Provide your own, or call `loadFallbackFont()` with no argument to auto-resolve
one:

```ts
import { fonts } from 'modern-font'

// explicit fallback
await fonts.loadFallbackFont('/fallback.woff')

// or auto — two stages:
//   1. Local Font Access API: a real system font (covers CJK). Chromium + HTTPS
//      only, and needs a user gesture + permission; on failure it moves on.
//   2. a tiny built-in placeholder font, so text never breaks for lack of a font.
await fonts.loadFallbackFont()
```

The built-in placeholder is a 552-byte `glyf` font (a single `.notdef` tofu
box) — every character renders as a box. Load the real fonts you actually
typeset with (especially CJK) on demand as usual.

## 🚀 WOFF to TTF

```ts
import { TTF, WOFF } from 'modern-font'

// buffer is WOFF file arrayBuffer
const ttf = TTF.from(new WOFF(buffer).sfnt)

// TTF file
window.open(URL.createObjectURL(ttf.toBlob()))
```

## 🚀 TTF to WOFF

```ts
import { TTF, WOFF } from 'modern-font'

// buffer is TTF file arrayBuffer
const woff = WOFF.from(new TTF(buffer).sfnt)

// WOFF file
window.open(URL.createObjectURL(woff.toBlob()))
```

## 🚀 TTF to EOT

```ts
import { EOT, TTF } from 'modern-font'

// buffer is TTF file arrayBuffer
const eot = EOT.from(new TTF(buffer))

// EOT file
window.open(URL.createObjectURL(eot.toBlob()))
```

## 🚀 Minify

```ts
import { minifyFont } from 'modern-font'

fetch('font.woff')
  .then(rep => rep.arrayBuffer())
  .then((rawBuffer) => {
    const buffer = minifyFont(rawBuffer, 'A set of text cropped from a font file')

    console.log(
      `raw size: ${rawBuffer.byteLength / 1024 / 1024}`,
      `minimized size: ${buffer.byteLength / 1024 / 1024}`,
    )

    // minimized woff file
    const woff = new Blob([buffer], { type: 'font/woff' })
    window.open(URL.createObjectURL(woff))
  })
```

## TODO

- [WOFF2](https://www.w3.org/TR/WOFF2)

---
_Source: https://npm.io/package/modern-font · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._