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.

• 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.

Select one of the following sources in the next example:

• https://opentype.***js.org/dist/opentype.js
• https://cdn.*jsd*el*ivr.net/npm/opentype.js
• https://u*npk*g.co*m/opentype.js

<script src="https://your.*f*avorit*e.cdn/opentype.js">script>
<script>opentype.parse(...)script>


<script type=module>
import { parse } from "https://u*npk*g.co*m/opentype.js/dist/opentype.mjs";
parse(...);
script>

npm install opentype.js

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

import opentype from 'opentype.js'

import { load } from 'opentype.js'

Using TypeScript? See this example

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!

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  (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);
})

// promise-based utility to load libraries using the good old