It gives you access to the **letterforms** of text from the browser or Node.js.
See [https://opentype.js.org/](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
```html
```
### via [npm](http://npmjs.org/) package manager
```sh
npm install opentype.js
```
```js
const opentype = require('opentype.js');
import opentype from 'opentype.js'
import { load } from 'opentype.js'
```
Using TypeScript? [See this example](./docs/examples/typescript)
## Contribute
If you plan on improving or debugging opentype.js, you can:
- Fork the [opentype.js](https://github.com/opentypejs/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!
## Maintainer Releases
Releases are published from the manual [Publish package to npm](https://github.com/opentypejs/opentype.js/actions/workflows/release.yml) workflow.
1. Confirm the target version, for example `1.3.5`, and make sure `master` is green.
2. Run the workflow from `master` with `dryRun: true` and `npmDistTag: latest`.
3. Inspect the dry-run output, especially the package version and packed files.
4. Re-run the workflow with the same version and `dryRun: false`.
The release workflow runs preflight checks, publishes to npm, then creates the matching git tag and GitHub release.
## Usage
### Loading a WOFF/OTF/TTF font
This is done in two steps: first, we load the font file into an `ArrayBuffer` ...
```js
// 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
```js
// 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);
})
```
Loading a WOFF2 font
WOFF2 Brotli compression perform [29% better](https://www.w3.org/TR/WOFF20ER/#appendixB) than it WOFF predecessor.
But this compression is also more complex, and would result in a much heavier (>10×!) opentype.js library (≈120KB => ≈1400KB).
To solve this: Decompress the font beforehand (for example with [fontello/wawoff2](https://github.com/fontello/wawoff2)).
```js
// promise-based utility to load libraries using the good old