{"id":15744,"library":"opentype.js","title":"OpenType.js","description":"OpenType.js is a JavaScript library designed for parsing and writing TrueType and OpenType fonts, providing deep access to font data and glyph outlines. The current stable version on npm is 1.3.4, released in 2021, though active development continues on the `master` branch with many bug fixes and new features awaiting a 2.0.0 release. It supports a wide range of font formats including WOFF, OTF, and TTF (both TrueType `glyf` and PostScript `cff` outlines). Key differentiators include its ability to create Bezier paths from text, handle composite glyphs, kerning (GPOS/kern table), ligatures, and TrueType font hinting. It runs seamlessly in both browser environments and Node.js, offering a low memory mode option for efficiency.","status":"maintenance","version":"1.3.4","language":"javascript","source_language":"en","source_url":"git://github.com/opentypejs/opentype.js","tags":["javascript","graphics","fonts","font","opentype","otf","ttf","woff","type"],"install":[{"cmd":"npm install opentype.js","lang":"bash","label":"npm"},{"cmd":"yarn add opentype.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add opentype.js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary export provides all top-level functions (load, parse, etc.) as properties.","wrong":"const opentype = require('opentype.js').default","symbol":"opentype","correct":"import opentype from 'opentype.js'"},{"note":"Specific functions like `load` and `parse` are also available as named exports for convenience, alongside being properties of the default export.","wrong":"import { opentype } from 'opentype.js'","symbol":"load","correct":"import { load } from 'opentype.js'"},{"note":"Used for parsing font buffers synchronously, contrasting with the asynchronous `load`.","wrong":"opentype.parse() directly in CommonJS without requiring the default export first.","symbol":"parse","correct":"import { parse } from 'opentype.js'"}],"quickstart":{"code":"import opentype from 'opentype.js';\n\n// Simulate a canvas environment for Node.js or ensure this runs in a browser.\n// In a browser, getContext('2d') would work directly on a <canvas> element.\n// For Node.js, a library like 'canvas' would be needed.\n\n// Mocking a canvas context for demonstration purposes\nconst mockCanvasContext = {\n  beginPath: () => console.log('beginPath'),\n  moveTo: (x, y) => console.log(`moveTo(${x}, ${y})`),\n  lineTo: (x, y) => console.log(`lineTo(${x}, ${y})`),\n  quadraticCurveTo: (cx, cy, x, y) => console.log(`quadraticCurveTo(${cx}, ${cy}, ${x}, ${y})`),\n  bezierCurveTo: (c1x, c1y, c2x, c2y, x, y) => console.log(`bezierCurveTo(${c1x}, ${c1y}, ${c2x}, ${c2y}, ${x}, ${y})`),\n  closePath: () => console.log('closePath'),\n  fill: () => console.log('fill'),\n  stroke: () => console.log('stroke')\n};\n\nasync function loadAndDrawFont() {\n  try {\n    // Replace with a real font URL or path.\n    // For a local file in Node.js, you'd use fs.readFileSync and opentype.parse.\n    // For browser, 'fonts/Roboto-Black.ttf' would be relative to the HTML.\n    const font = await opentype.load('https://raw.githubusercontent.com/opentypejs/opentype.js/master/fonts/Roboto-Black.ttf');\n    console.log('Font loaded successfully.');\n\n    const text = 'Hello, World!';\n    const fontSize = 72;\n    const x = 0;\n    const y = 150;\n\n    // Construct a Path object containing the letter shapes\n    const path = font.getPath(text, x, y, fontSize);\n    console.log(`Generated path for text: \"${text}\"`);\n\n    // To draw on a real canvas:\n    // const ctx = document.getElementById('myCanvas').getContext('2d');\n    // path.draw(ctx);\n\n    // Using the mock context to show operations:\n    path.draw(mockCanvasContext);\n    console.log('Path drawing operations logged.');\n  } catch (err) {\n    console.error('Error loading or drawing font:', err);\n  }\n}\n\nloadAndDrawFont();","lang":"typescript","description":"Demonstrates asynchronous font loading from a URL and rendering text into a scalable vector path using the `getPath` method. Includes a mock canvas context for logging drawing operations."},"warnings":[{"fix":"For the latest features and bug fixes, users must build the `dist` files directly from the GitHub repository's `master` branch rather than relying on the npm package.","message":"The npm package (v1.3.4) has not been updated since 2021, despite active development on the `master` branch. Many bug fixes and new features are unreleased on npm.","severity":"gotcha","affected_versions":"<=1.3.4"},{"fix":"Migrate to npm or a CDN for package management. `npm install opentype.js` or use `<script src=\"https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js\"></script>`.","message":"Bower support for installation is deprecated and no longer actively maintained by the Bower project itself.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Use `opentype.load(url, callback)` or `await opentype.load(url)` for fetching fonts from URLs. Use `opentype.parse(buffer)` when you already have the font data as an `ArrayBuffer`.","message":"Distinguishing between `opentype.load()` (asynchronous, network-dependent) and `opentype.parse()` (synchronous, requires ArrayBuffer) is crucial for correct usage.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"For CommonJS, use `const opentype = require('opentype.js');`. For ESM, use `import opentype from 'opentype.js';` or `import { load } from 'opentype.js';`.","message":"When consuming in Node.js, ensure your environment supports ES Modules or correctly use CommonJS `require`. The package's source uses ES6 imports, but the distributed files are made compatible.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"In Node.js, use a headless canvas library like `canvas` (e.g., `npm install canvas`) and pass its context. Alternatively, use `opentype.parse()` with a font buffer read from the file system and perform path operations without drawing.","cause":"Attempting to use `opentype.js` rendering methods (e.g., `path.draw(ctx)`) or `opentype.load()` directly in a Node.js environment without a canvas implementation or polyfill.","error":"ReferenceError: document is not defined"},{"fix":"Verify the font URL is correct and accessible. Check browser console for network errors (CORS). Ensure the font file is valid TrueType or OpenType format. Consider using `opentype.parse()` if loading local files in Node.js or pre-fetching the ArrayBuffer.","cause":"The `opentype.load()` callback reports an error, usually due to an invalid font URL, network issues, CORS restrictions in a browser, or a corrupt/unsupported font file.","error":"Font could not be loaded: [error message]"},{"fix":"Always check for errors after `opentype.load()` (e.g., `if (err) { ... }`) or handle rejections in `async/await` blocks. Ensure `opentype.parse()` receives a valid `ArrayBuffer`.","cause":"The `font` object returned by `opentype.load` or `opentype.parse` is `null` or `undefined` because the font failed to load or parse.","error":"TypeError: font.getPath is not a function"}],"ecosystem":"npm"}