### Install opentype.js via npm Source: https://github.com/opentypejs/opentype.js/blob/master/README.md Install the package and import it into your project. ```bash npm install opentype.js ``` ```javascript const opentype = require('opentype.js'); import opentype from 'opentype.js' import { load } from 'opentype.js' ``` -------------------------------- ### Run font generation in Node.js Source: https://github.com/opentypejs/opentype.js/blob/master/docs/examples/README.md Execute the font generation script within the examples directory using the Node.js runtime. ```bash cd opentype.js/examples node generate-font-node.js # This generates a font file, called Pyramid-Regular.otf. ``` -------------------------------- ### Define Glyph Mapping and Geometry Source: https://github.com/opentypejs/opentype.js/blob/master/docs/examples/font-editor.html JavaScript setup for importing opentype.js and defining the coordinate mapping for character glyphs. ```javascript import * as opentype from "/dist/opentype.mjs"; function linePoint(t, x1, y1, x2, y2) { return [x1 + t * (x2 - x1), y1 + t * (y2 - y1)]; } var SCREEN_SCALE = 20; var TTF_SCALE = 80; var gGlyphMap = { 'A': [[0, 0], [4, 10], [8, 0]], 'B': [[0, 0], [0, 10], [5, 10], [5, 5], [7, 5], [7, 0]], 'C': [[0, 0], [0, 10], [8, 10], [8, 6], [3, 6], [3, 4], [8, 4], [8, 0]], 'D': [[0, 0], [0, 3], [2, 3], [2, 7], [0, 7], [0, 10], [8, 10], [8, 0]], 'E': [[0, 0], [0, 3], [0, 10], [8, 10], [8, 7], [3, 7], [3, 6], [5, 6], [5, 4], [3, 4], [3, 3], [8, 3], [8, 0]], 'F': [[0, 0], [0, 3], [0, 10], [8, 10], [8, 7], [3, 7], [3, 6], [5, 6], [5, 3], [3, 3], [3, 0]], 'G': [[0, 0], [0, 3], [0, 10], [8, 10], [8, 7], [3, 7], [3, 3], [5, 3], [5, 5], [8, 5], [8, 0]], 'H': [[0, 0], [0, 3], [0, 7], [0, 10], [3, 10], [3, 7], [5, 7], [5, 10], [8, 10], [8, 0], [5, 0], [5, 3], [3, 3], [3, 0]], 'I': [[0, 0], [0, 10], [3, 10], [3, 0]], 'J': [[0, 0], [0, 3], [4, 3], [4, 10], [7, 10], [7, 0]], 'K': [[0, 0], [0, 10], [3, 10], [3, 7], [5, 10], [8, 10], [5, 5], [8, 0], [5, 0], [3, 3], [3, 0]], 'L': [[0, 0], [0, 10], [3, 10], [3, 3], [7, 3], [7, 0]], 'M': [[0, 0], [0, 10], [3, 10], [4, 8], [5, 10], [8, 10], [8, 0], [5, 0], [5, 4], [4, 3], [3, 4], [3, 0]], 'N': [[0, 0], [0, 10], [3, 10], [3, 9], [5, 7], [5, 10], [8, 10], [8, 0], [5, 0], [5, 3], [3, 5], [3, 0]], 'O': [[0, 0], [0, 10], [7, 10], [7, 0]], 'P': [[0, 0], [0, 10], [7, 10], [7, 4], [3, 4], [3, 0]], 'Q': [[0, 0], [0, 10], [7, 10], [7, 0], [6, 0], [7, -1], [4, -1], [3, 0]], 'R': [[0, 0], [0, 10], [7, 10], [7, 4], [5, 4], [7, 0], [4, 0], [3, 2], [3, 0]], 'S': [[7, 10], [7, 7], [3, 7], [3, 6], [7, 6], [7, 0], [0, 0], [0, 3], [4, 3], [4, 4], [0, 4], [0, 10]], 'T': [[2, 0], [2, 7], [0, 7], [0, 10], [7, 10], [7, 7], [5, 7], [5, 0]], 'U': [[0, 0], [0, 10], [3, 10], [3, 3], [5, 3], [5, 10], [8, 10], [8, 0]], 'V': [[0, 10], [3, 10], [4, 6], [5, 10], [8, 10], [5, 0], [3, 0]], 'W': [[0, 10], [3, 10], [4, 6], [5, 8], [6, 6], [7, 10], [10, 10], [8, 0], [6, 0], [5, 3], [4, 0], [2, 0]], 'X': [[0, 10], [3, 10], [4, 8], [5, 10], [8, 10], [5, 5], [8, 0], [5, 0], [4, 2], [3, 0], [0, 0], [3, 5]], 'Y': [[0, 10], [3, 10], [4, 8], [5, 10], [8, 10], [5, 5], [5, 0], [3, 0], [3, 5]], 'Z': [[0, 10], [7, 10], [7, 7], [3, 3], [7, 3], [7, 0], [0, 0], [0, 3], [4, 7], [0, 7]], '_': [[0, 0], [0, 1], [8, 1], [8, 0]], }; // We map between the character and the internal name. var TT ``` -------------------------------- ### Saving a Font Source: https://github.com/opentypejs/opentype.js/blob/master/README.md Provides examples for saving a Font object to a file, both in Node.js and browser environments. ```APIDOC ## Saving a Font Once you have a `Font` object (from crafting or from `.parse()`) you can save it back out as file. ```js // using node:fs fs.writeFileSync("out.otf", Buffer.from(font.toArrayBuffer())); // using the browser to createElement a that will be clicked const href = window.URL.createObjectURL(new Blob([font.toArrayBuffer()]), {type: "font/opentype"}); Object.assign(document.createElement('a'), {download: "out.otf", href}).click(); ``` ``` -------------------------------- ### Get All Color Palettes Source: https://context7.com/opentypejs/opentype.js/llms.txt Retrieves all color palettes from the CPAL table in the specified format. ```javascript const font = opentype.parse(colorFontBuffer); const palettes = font.palettes.getAll('hexa'); console.log('Number of palettes:', palettes.length); console.log('First palette colors:', palettes[0]); // ['#ff0000ff', '#00ff00ff', '#0000ffff', ...] ``` -------------------------------- ### Add Glyph Path to Context Source: https://github.com/opentypejs/opentype.js/blob/master/docs/examples/font-editor.html Adds a series of moveTo and lineTo commands to the canvas context based on the provided points, offset, and scale. Assumes the context's path has already been started. ```javascript function addGlyphPath(ctx, points, x, y, scale) { var x1 = x + points[0][0] * scale; var y1 = y + points[0][1] * scale; ctx.moveTo(x1, y1); var x2; var y2; for (var i = 1; i < points.length; i++) { x2 = x + points[i][0] * scale; y2 = y + points[i][1] * scale; ctx.lineTo(x2, y2); } } ``` -------------------------------- ### Get Specific Color Palette Source: https://context7.com/opentypejs/opentype.js/llms.txt Retrieves a single palette by its index. ```javascript const font = opentype.parse(colorFontBuffer); const palette = font.palettes.get(0, 'rgba'); console.log('Palette 0:', palette); // ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', ...] ``` -------------------------------- ### Create and Render Fonts with OpenType.js Source: https://github.com/opentypejs/opentype.js/blob/master/docs/examples/creating-fonts.html Demonstrates importing the library, defining glyph paths, constructing a font object, and rendering glyphs to a canvas. ```javascript import * as opentype from "/dist/opentype.mjs"; function hexDump(bytes) { var hexString = bytes.map(function(v) { var h = v.toString(16); return h.length === 1 ? '0' + h : h; }); return hexString.join(' ').toUpperCase(); } // Create a canvas and adds it to the document. // Returns the 2d drawing context. function createGlyphCanvas(glyph, size) { var canvasId, html, glyphsDiv, wrap, canvas, ctx; canvasId = 'c' + glyph.index; html = '

' + glyph.index + '

' + glyph.index + '' + glyph.name + 'U ' + glyph.unicode + '

'; const glyphsDiv = document.getElementById('glyphs'); const wrap = document.createElement('div'); wrap.innerHTML = html; glyphsDiv.appendChild(wrap); const canvas = document.getElementById(canvasId); return canvas.getContext('2d'); } ``` -------------------------------- ### Load and Parse Font Files Source: https://github.com/opentypejs/opentype.js/blob/master/docs/font-inspector.html Asynchronously loads font files, handles WOFF2 decompression using wawoff2, and parses the font data. ```javascript const form = document.forms.demo; async function display(file, name) { form.fontname.innerText = name; const isWoff2 = name.endsWith('.woff2'); if (isWoff2 && !window.Module) { const wasmReady = new Promise((onRuntimeInitialized) => window.Module = { onRuntimeInitialized }); await loadScript('https://unpkg.com/wawoff2@2.0.1/build/decompress_binding.js'); // wawoff2 is globaly loaded as 'Module' await wasmReady; // WASM has called our onRuntimeInitialized() resolver } try { const data = await file.arrayBuffer(); onFontLoaded(opentype.parse(isWoff2 ? Module.decompress(data) : data)); showErrorMessage(''); } catch (err) { showErrorMessage(err.toString()); } } form.file.onchange = function(e) { display(e.target.files[0], e.target.files[0].name); }; enableHighDPICanvas('preview'); const fontFileName = 'fonts/FiraSansMedium.woff'; display(await fetch(fontFileName), fontFileName); ``` -------------------------------- ### Create New Path Source: https://context7.com/opentypejs/opentype.js/llms.txt Instantiates a new Path object for custom shape construction. ```javascript const path = new opentype.Path(); // Set fill and stroke properties path.fill = '#FF0000'; path.stroke = '#000000'; path.strokeWidth = 2; // Build the path with commands path.moveTo(0, 0); path.lineTo(100, 0); path.lineTo(100, 100); path.lineTo(0, 100); path.close(); // Draw on canvas path.draw(ctx); // Or convert to SVG const svg = path.toSVG(); ``` -------------------------------- ### new opentype.Font Source: https://context7.com/opentypejs/opentype.js/llms.txt Creates a new Font object from scratch. ```APIDOC ## new opentype.Font(options) ### Description Creates a new Font object from scratch. Used to programmatically create fonts with custom glyphs. ### Parameters - **options** (Object) - Required - Must include familyName, styleName, unitsPerEm, ascender, and descender properties. ```