opentype.js

It gives you access to the letterforms of text from the browser or Node.js.

See https://opentype.js.org/ for a live demo.

Features

• Create a bézier path out of a piece of text.
• Support for composite glyphs (accented letters).
• Support for WOFF, OTF, TTF (both with TrueType glyf and PostScript cff outlines)
• Support for kerning (Using GPOS or the kern table).
• Support for ligatures.
• Support for TrueType font hinting.
• Support arabic text rendering (See issue #364 & PR #359 #361)
• Support for emojis and other SVG or COLR/CPAL color glyphs
• A low memory mode is available as an option (see #329)
• Runs in the browser and Node.js.

Installation

via CDN

Select one of the following sources in the next example:

• https://opentype.js.org/dist/opentype.js
• https://cdn.jsdelivr.net/npm/opentype.js
• https://unpkg.com/opentype.js

<!-- using global declaration -->
<script src="https://your.favorite.cdn/opentype.js"></script>
<script>opentype.parse(...)</script>

<!-- using module declaration (need full path) -->
<script type=module>
import { parse } from "https://unpkg.com/opentype.js/dist/opentype.mjs";
parse(...);
</script>

via npm package manager

npm install opentype.js

const opentype = require('opentype.js');

import opentype from 'opentype.js'

import { load } from 'opentype.js'

Using TypeScript? See this example

Contribute

If you plan on improving or debugging opentype.js, you can:

• Fork the opentype.js repo
• clone your fork git clone git://github.com/yourname/opentype.js.git
• move into the project cd opentype.js
• install needed dependencies with npm install
• make your changes
  • option A: for a simple build, use npm run build
  • option B: for a development server, use npm run start and navigate to the /docs folder
• check if all still works fine with npm run test
• commit and open a Pull Request with your changes. Thank you!

Usage

Loading a WOFF/OTF/TTF font

This is done in two steps: first, we load the font file into an ArrayBuffer ...

// either from an URL
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
// ... or from filesystem (node)
const buffer = require('fs').promises.readFile('./my.woff');
// ... or from an <input type=file id=myfile> (browser)
const buffer = document.getElementById('myfile').files[0].arrayBuffer();

... then we .parse() it into a Font instance

// if running in async context:
const font = opentype.parse(await buffer);
console.log(font);

// if not running in async context:
buffer.then(data => {
    const font = opentype.parse(data);
    console.log(font);
})