opentype.js
Advanced tools
opentype.js is a JavaScript library for working with OpenType and TrueType fonts. It allows you to parse, manipulate, and render font files directly in the browser or in a Node.js environment.
Parsing Font Files
This feature allows you to load and parse font files. The code sample demonstrates how to load a TrueType font file and handle the result.
const opentype = require('opentype.js');
opentype.load('path/to/font.ttf', function(err, font) {
if (err) {
console.error('Could not load font: ' + err);
} else {
console.log('Font loaded successfully');
}
});Rendering Text
This feature allows you to render text using a loaded font. The code sample shows how to render the text 'Hello, World!' on a canvas context.
const opentype = require('opentype.js');
opentype.load('path/to/font.ttf', function(err, font) {
if (err) {
console.error('Could not load font: ' + err);
} else {
const path = font.getPath('Hello, World!', 0, 150, 72);
path.draw(ctx); // ctx is a CanvasRenderingContext2D
}
});Accessing Glyph Data
This feature allows you to access detailed glyph data from a font. The code sample demonstrates how to get the glyph for the character 'A' and log its details.
const opentype = require('opentype.js');
opentype.load('path/to/font.ttf', function(err, font) {
if (err) {
console.error('Could not load font: ' + err);
} else {
const glyph = font.charToGlyph('A');
console.log(glyph);
}
});fontkit is a comprehensive font library for Node.js and the browser. It supports various font formats including TrueType, OpenType, WOFF, and WOFF2. Compared to opentype.js, fontkit offers more extensive support for different font formats and advanced text layout features.
pdf-lib is a library for creating and modifying PDF documents in JavaScript. It includes functionality for embedding fonts and drawing text. While it is not solely focused on font manipulation like opentype.js, it provides robust support for working with fonts within the context of PDF generation.
typr.js is a JavaScript library for parsing and working with font files. It supports both TrueType and OpenType fonts. Compared to opentype.js, typr.js is more lightweight and focuses primarily on font parsing rather than rendering.
opentype.js is a JavaScript parser for TrueType and OpenType fonts.
It gives you access to the letterforms of text from the browser or node.js.
Here's an example. We load a font, then display it on a canvas with id "canvas":
opentype.load('fonts/Roboto-Black.ttf', function (err, font) {
if (err) {
alert('Font could not be loaded: ' + err);
} else {
var ctx = document.getElementById('canvas').getContext('2d');
// Construct a Path object containing the letter shapes of the given text.
// The other parameters are x, y and fontSize.
// Note that y is the position of the baseline.
var path = font.getPath('Hello, World!', 0, 150, 72);
// If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).
path.draw(ctx);
}
}
See the project website for a live demo.
opentype.load(url, callback)Load the font from the url and execute the callback. The callback gets (err, font) where font is a Font object. Check if the err is null before using the font.
opentype.parse(buffer)Parse an ArrayBuffer containing OpenType font data and return a Font object. This method always returns a Font, but check font.supported to see if the font is in a supported format. The most common cause for unsupported fonts are fonts with Postscript outlines, which we do not yet support.
A Font represents a loaded OpenType font file. It contains a set of glyphs and methods to draw text on a drawing context, or to get a path representing the text.
glyphs: an indexed list of Glyph objects.unitsPerEm: X/Y coordinates in fonts are stored as integers. This value determines the size of the grid. Common values are 2048 and 4096.Font.getPath(text, x, y, fontSize, options)Create a Path that represents the given text.
x: Horizontal position of the beginning of the text. (default: 0)y: Vertical position of the baseline of the text. (default: 0)fontSize: Size of the text in pixels (default: 72).Options is an optional object containing:
kerning: if true takes kerning information into account (default: true)Font.draw(ctx, text, x, y, fontSize, options)Create a Path that represents the given text.
ctx: A 2D drawing context, like Canvas.x: Horizontal position of the beginning of the text. (default: 0)y: Vertical position of the baseline of the text. (default: 0)fontSize: Size of the text in pixels (default: 72).Options is an optional object containing:
kerning: if true takes kerning information into account (default: true)Font.drawPoints(ctx, text, x, y, fontSize, options)Draw the points of all glyphs in the text. On-curve points will be drawn in blue, off-curve points will be drawn in red. The arguments are the same as Font.draw.
Font.drawMetrics(ctx, text, x, y, fontSize, options)Draw lines indicating important font measurements for all glyphs in the text. Black lines indicate the origin of the coordinate system (point 0,0). Blue lines indicate the glyph bounding box. Green line indicates the advance width of the glyph.
Font.stringToGlyphs(string)Convert the string to a list of glyph objects. Note that there is no strict 1-to-1 correspondence between the string and glyph list due to possible substitutions such as ligatures. The list of returned glyphs can be larger or smaller than the length of the given string.
Font.charToGlyph(char)Convert the character to a Glyph object. Returns null if the glyph could not be found. Note that this function assumes that there is a one-to-one mapping between the given character and a glyph; for complex scripts this might not be the case.
Font.getKerningValue(leftGlyph, rightGlyph)Retrieve the value of the kerning pair between the left glyph (or its index) and the right glyph (or its index). If no kerning pair is found, return 0. The kerning value gets added to the advance width when calculating the spacing between glyphs.
A Glyph is an individual mark that often corresponds to a character. Some glyphs, such as ligatures, are a combination of many characters. Glyphs are the basic building blocks of a font.
font: A reference to the Font object.index: The index number of the glyph.xMin, yMin, xMax, yMax: The bounding box of the glyph.points: The list of points in the glyph. Note that it's more convenient to use glyph.getPath.Glyph.getPath(x, y, fontSize)Convert the glyph to a Path we can draw on a drawing context.
x: Horizontal position of the glyph. (default: 0)y: Vertical position of the baseline of the glyph. (default: 0)fontSize: Font size in pixels (default: 72).Glyph.draw(ctx, x, y, fontSize)Draw the glyph on the given context.
ctx: The drawing context.x: Horizontal position of the glyph. (default: 0)y: Vertical position of the baseline of the glyph. (default: 0)fontSize: Font size, in pixels (default: 72).Glyph.drawPoints(ctx, x, y, fontSize)Draw the points of the glyph on the given context.
On-curve points will be drawn in blue, off-curve points will be drawn in red.
The arguments are the same as Glyph.draw.
Glyph.drawMetrics(ctx, x, y, fontSize)Draw lines indicating important font measurements for all glyphs in the text.
Black lines indicate the origin of the coordinate system (point 0,0).
Blue lines indicate the glyph bounding box.
Green line indicates the advance width of the glyph.
The arguments are the same as Glyph.draw.
I would like to acknowledge the work of others without which opentype.js wouldn't be possible:
FAQs
OpenType font parser
We found that opentype.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.