@pdf-lib/fontkit
Advanced tools
@pdf-lib/fontkit is an npm package that provides advanced font handling capabilities for the PDF-Lib library. It allows you to embed custom fonts, measure text, and perform other font-related operations when working with PDFs.
Embed Custom Fonts
This feature allows you to embed custom fonts into your PDF documents. The code sample demonstrates how to register the fontkit, read a custom font file, embed it into a PDF document, and use it to draw text on a page.
const { PDFDocument } = require('pdf-lib');
const fontkit = require('@pdf-lib/fontkit');
const fs = require('fs');
(async () => {
const pdfDoc = await PDFDocument.create();
pdfDoc.registerFontkit(fontkit);
const fontBytes = fs.readFileSync('path/to/your/font.ttf');
const customFont = await pdfDoc.embedFont(fontBytes);
const page = pdfDoc.addPage();
page.drawText('Hello, world!', { font: customFont, x: 50, y: 700, size: 30 });
const pdfBytes = await pdfDoc.save();
fs.writeFileSync('output.pdf', pdfBytes);
})();Measure Text
This feature allows you to measure the width of a given text string when rendered with a specific font and size. The code sample demonstrates how to calculate the width of the text 'Hello, world!' using a custom font.
const { PDFDocument } = require('pdf-lib');
const fontkit = require('@pdf-lib/fontkit');
const fs = require('fs');
(async () => {
const pdfDoc = await PDFDocument.create();
pdfDoc.registerFontkit(fontkit);
const fontBytes = fs.readFileSync('path/to/your/font.ttf');
const customFont = await pdfDoc.embedFont(fontBytes);
const text = 'Hello, world!';
const textWidth = customFont.widthOfTextAtSize(text, 30);
console.log(`Text width: ${textWidth}`);
})();PDFKit is a JavaScript library for generating PDFs. It provides a wide range of features for creating and manipulating PDF documents, including support for embedding fonts. Compared to @pdf-lib/fontkit, PDFKit is a more comprehensive solution for PDF generation but may not offer the same level of font-specific functionality.
pdfmake is a library for creating PDF documents in JavaScript. It supports custom fonts, text measurement, and other font-related operations. While it offers similar functionalities to @pdf-lib/fontkit, pdfmake is designed to work as a standalone PDF generation library rather than as an extension to another library like PDF-Lib.
This project is a fork of https://github.com/foliojs/fontkit created for use in https://github.com/Hopding/pdf-lib.
Listed below are changes that have been made in this fork:
fs module isn't needed to read it back:
Makefile to Makefile.js using shelljs:
stream, util, Buffer) into UMD and ES modules so consumers of this lib don't have to deal with them:
Uint8Array objects for font data instead of Buffer objects, so consumers can stick to plain JS regardless of their environment:
new Function() to allow usage on CSP sites:
@pdf-lib/fontkit
Also see
Fontkit is an advanced font engine for Node and the browser, used by PDFKit and pdf-lib. It supports many font formats, advanced glyph substitution and layout features, glyph path extraction, color emoji glyphs, font subsetting, and more.
import fontkit from '@pdf-lib/fontkit';
import fs from 'fs';
// open a font synchronously
const fontData = fs.readFileSync('font.ttf');
const font = fontkit.create(fontData);
// layout a string, using default shaping features.
// returns a GlyphRun, describing glyphs and positions.
const run = font.layout('hello world!');
// get an SVG path for a glyph
const svg = run.glyphs[0].path.toSVG();
// create a font subset
const subset = font.createSubset();
run.glyphs.forEach(function(glyph) {
subset.includeGlyph(glyph);
});
subset.encodeStream()
.pipe(fs.createWriteStream('subset.ttf'));
To install the latest stable version:
# With npm
npm install --save @pdf-lib/fontkit
# With yarn
yarn add @pdf-lib/fontkit
This assumes you're using npm or yarn as your package manager.
You can also download @pdf-lib/fontkit as a UMD module from unpkg. The UMD builds have been compiled to ES5, so they should work in any modern browser. UMD builds are useful if you aren't using a package manager or module bundler. For example, you can use them directly in the <script> tag of an HTML page.
The following builds are available:
When using a UMD build, you will have access to a global window.UnicodeProperties variable. This variable contains the object exported by @pdf-lib/unicode-properties. For example:
// NPM module
import fontkit from '@pdf-lib/fontkit';
// UMD module
var fontkit = window.fontkit;
fontkit.create(buffer, postscriptName = null)Returns a font object for the given buffer. For collection fonts (such as TrueType collection files), you can pass a postscriptName to get that font out of the collection instead of a collection object.
There are several different types of font objects that are returned by fontkit depending on the font format. They all inherit from the TTFFont class and have the same public API, described below.
The following properties are strings (or null if the font does not contain strings for them) describing the font, as specified by the font creator.
postscriptNamefullNamefamilyNamesubfamilyNamecopyrightversionThe following properties describe the general metrics of the font. See here for a good overview of how all of these properties relate to one another.
unitsPerEm - the size of the font’s internal coordinate gridascent - the font’s ascenderdescent - the font’s descenderlineGap - the amount of space that should be included between linesunderlinePosition - the offset from the normal underline position that should be usedunderlineThickness - the weight of the underline that should be useditalicAngle - if this is an italic font, the angle the cursor should be drawn at to match the font designcapHeight - the height of capital letters above the baseline. See here for more details.xHeight- the height of lower case letters. See here for more details.bbox - the font’s bounding box, i.e. the box that encloses all glyphs in the fontnumGlyphs - the number of glyphs in the fontcharacterSet - an array of all of the unicode code points supported by the fontavailableFeatures - an array of all OpenType feature tags (or mapped AAT tags) supported by the font (see below for a description of this)Fontkit includes several methods for character to glyph mapping, including support for advanced OpenType and AAT substitutions.
font.glyphForCodePoint(codePoint)Maps a single unicode code point (number) to a Glyph object. Does not perform any advanced substitutions (there is no context to do so).
font.hasGlyphForCodePoint(codePoint)Returns whether there is glyph in the font for the given unicode code point.
font.glyphsForString(string)This method returns an array of Glyph objects for the given string. This is only a one-to-one mapping from characters
to glyphs. For most uses, you should use font.layout (described below), which provides a much more advanced mapping
supporting AAT and OpenType shaping.
Fontkit includes several methods for accessing glyph metrics and performing layout, including support for kerning and other advanced OpenType positioning adjustments.
font.widthOfGlyph(glyph_id)Returns the advance width (described above) for a single glyph id.
font.layout(string, features = [])This method returns a GlyphRun object, which includes an array of Glyphs and GlyphPositions for the given string.
Glyph objects are described below. GlyphPosition objects include 4 properties: xAdvance, yAdvance, xOffset,
and yOffset.
The features parameter is an array of OpenType feature tags to be applied
in addition to the default set. If this is an AAT font, the OpenType feature tags are mapped to AAT features.
Fontkit has support for AAT variation fonts, where glyphs can adjust their shape according to user defined settings along various axes including weight, width, and slant. Font designers specify the minimum, default, and maximum values for each axis they support, and allow the user fine grained control over the rendered text.
font.variationAxesReturns an object describing the available variation axes. Keys are 4 letter axis tags, and values include name,
min, default, and max properties for the axis.
font.namedVariationsThe font designer may have picked out some variations that they think look particularly good, for example a light, regular, and bold weight which would traditionally be separate fonts. This property returns an object describing these named variation instances that the designer has specified. Keys are variation names, and values are objects with axis settings.
font.getVariation(variation)Returns a new font object representing this variation, from which you can get glyphs and perform layout as normal.
The variation parameter can either be a variation settings object or a string variation name. Variation settings objects
have axis names as keys, and numbers as values (should be in the range specified by font.variationAxes).
font.getGlyph(glyph_id, codePoints = [])Returns a glyph object for the given glyph id. You can pass the array of code points this glyph represents for your use later, and it will be stored in the glyph object.
font.createSubset()Returns a Subset object for this font, described below.
For font collection files that contain multiple fonts in a single file, such as TrueType Collection (.ttc) and Datafork TrueType (.dfont) files, a font collection object can be returned by Fontkit.
collection.getFont(postscriptName)Gets a font from the collection by its postscript name. Returns a Font object, described above.
collection.fontsThis property is a lazily-loaded array of all of the fonts in the collection.
Glyph objects represent a glyph in the font. They have various properties for accessing metrics and the actual vector path the glyph represents, and methods for rendering the glyph to a graphics context.
You do not create glyph objects directly. They are created by various methods on the font object, described above. There are several subclasses of the base Glyph class internally that may be returned depending on the font format, but they all include the following API.
id - the glyph id in the fontcodePoints - an array of unicode code points that are represented by this glyph. There can be multiple code points in the case of ligatures and other glyphs that represent multiple visual characters.path - a vector Path object representing the glyphbbox - the glyph’s bounding box, i.e. the rectangle that encloses the glyph outline as tightly as possible.cbox - the glyph’s control box. This is often the same as the bounding box, but is faster to compute. Because of the way bezier curves are defined, some of the control points can be outside of the bounding box. Where bbox takes this into account, cbox does not. Thus, cbox is less accurate, but faster to compute. See here for a more detailed description.advanceWidth - the glyph’s advance width.glyph.render(ctx, size)Renders the glyph to the given graphics context, at the specified font size.
Fontkit has support for several different color emoji font formats. Currently, these include Apple’s SBIX table (as used by the “Apple Color Emoji” font), and Microsoft’s COLR table (supported by Windows 8.1). Here is an overview of the various color font formats out there.
glyph.getImageForSize(size)For SBIX glyphs, which are bitmap based, this returns an object containing some properties about the image, along with the image data itself (usually PNG).
glyph.layersFor COLR glyphs, which are vector based, this returns an array of objects representing the glyphs and colors for each layer in render order.
Path objects are returned by glyphs and represent the actual vector outlines for each glyph in the font. Paths can be converted to SVG path data strings, or to functions that can be applied to render the path to a graphics context.
path.moveTo(x, y)Moves the virtual pen to the given x, y coordinates.
path.lineTo(x, y)Adds a line to the path from the current point to the given x, y coordinates.
path.quadraticCurveTo(cpx, cpy, x, y)Adds a quadratic curve to the path from the current point to the given x, y coordinates using cpx, cpy as a control point.
path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)Adds a bezier curve to the path from the current point to the given x, y coordinates using cp1x, cp1y and cp2x, cp2y as control points.
path.closePath()Closes the current sub-path by drawing a straight line back to the starting point.
path.toFunction()Compiles the path to a JavaScript function that can be applied with a graphics context in order to render the path.
path.toSVG()Converts the path to an SVG path data string.
path.bboxThis property represents the path’s bounding box, i.e. the smallest rectangle that contains the entire path shape. This is the exact bounding box, taking into account control points that may be outside the visible shape.
path.cboxThis property represents the path’s control box. It is like the bounding box, but it includes all points of the path, including control points of bezier segments. It is much faster to compute than the real bounding box, but less accurate if there are control points outside of the visible shape.
Fontkit can perform font subsetting, i.e. the process of creating a new font from an existing font where only the specified glyphs are included. This is useful to reduce the size of large fonts, such as in PDF generation or for web use.
Currently, subsets produce minimal fonts designed for PDF embedding that may not work as standalone files. They have no cmap tables and other essential tables for standalone use. This limitation will be removed in the future.
You create a Subset object by calling font.createSubset(), described above. The API on Subset objects is as follows.
subset.includeGlyph(glyph)Includes the given glyph object or glyph ID in the subset.
subset.encodeStream()Returns a stream containing the encoded font file that can be piped to a destination, such as a file.
FAQs
An advanced font engine for Node and the browser
The npm package @pdf-lib/fontkit receives a total of 114,565 weekly downloads. As such, @pdf-lib/fontkit popularity was classified as popular.
We found that @pdf-lib/fontkit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.