opentype.js

# Install opentype.js for font parsing and manipulation.
npm install opentype.js

// src/fonts/load.ts — Load a font from file or URL and read metadata.
import opentype from "opentype.js";
import fs from "fs";

// From file (Node.js)
const file = fs.readFileSync("./fonts/LiberationSans-Regular.ttf");
// A Node Buffer may be a view into a shared pool: copy out exactly its bytes.
const font = opentype.parse(file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength));

// In 2.x names are grouped by platform, then field, then language.
console.log(font.names.windows?.fontFamily?.en);   // "Liberation Sans"
console.log(font.names.windows?.designer?.en);     // designer name, if the font has one
console.log(font.unitsPerEm);             // 2048 for this font
console.log(font.numGlyphs);              // total glyph count

// src/fonts/measure.ts — Calculate text width and bounding box at a given size.
// Useful for layout engines and canvas text positioning.
import opentype from "opentype.js";

export function measureText(font: opentype.Font, text: string, fontSize: number) {
  const path = font.getPath(text, 0, 0, fontSize);
  const bb = path.getBoundingBox();
  const advance = font.getAdvanceWidth(text, fontSize); // includes kerning by default

  return {
    width: advance,
    height: bb.y2 - bb.y1,
    boundingBox: { x1: bb.x1, y1: bb.y1, x2: bb.x2, y2: bb.y2 },
  };
}

// src/fonts/to-svg.ts — Convert a text string to an SVG path element.
// This produces resolution-independent text that doesn't require the font file.
import opentype from "opentype.js";

export function textToSvg(
  font: opentype.Font,
  text: string,
  fontSize: number,
  x: number,
  y: number
): string {
  const path = font.getPath(text, x, y, fontSize);
  const pathData = path.toPathData(2); // precision
  const bb = path.getBoundingBox();

  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${bb.x1} ${bb.y1} ${bb.x2 - bb.x1} ${bb.y2 - bb.y1}">
  <path d="${pathData}" fill="currentColor"/>
</svg>`;
}

// src/fonts/glyphs.ts — Extract glyph outlines and metadata for specific characters.
import opentype from "opentype.js";

export function getGlyphInfo(font: opentype.Font, char: string) {
  const glyph = font.charToGlyph(char);
  const path = glyph.getPath(0, 0, 72);

  return {
    name: glyph.name,
    unicode: glyph.unicode,
    advanceWidth: glyph.advanceWidth,
    pathData: path.toPathData(2),
    commands: path.commands,
  };
}

// List all glyphs in a font (glyph.unicode is undefined for unmapped glyphs)
export function listGlyphs(font: opentype.Font) {
  const glyphs: { index: number; name: string; unicode: number | undefined }[] = [];
  for (let i = 0; i < font.numGlyphs; i++) {
    const g = font.glyphs.get(i);
    glyphs.push({ index: i, name: g.name, unicode: g.unicode });
  }
  return glyphs;
}

// src/fonts/subset.ts — Create a subset font containing only the glyphs needed
// for a specific string. Reduces font file size for web embedding.
import opentype from "opentype.js";
import fs from "fs";

export function subsetFont(font: opentype.Font, chars: string, outputPath: string) {
  const glyphs = [font.glyphs.get(0)]; // always include .notdef
  const seen = new Set<number>();

  for (const char of chars) {
    const glyph = font.charToGlyph(char);
    if (glyph.index !== 0 && !seen.has(glyph.index)) {
      glyphs.push(glyph);
      seen.add(glyph.index);
    }
  }

  const subset = new opentype.Font({
    familyName: "Subset",
    styleName: "Regular",
    unitsPerEm: font.unitsPerEm,
    ascender: font.ascender,
    descender: font.descender,
    glyphs,
  });

  // toArrayBuffer() works everywhere; download() only triggers a browser download.
  fs.writeFileSync(outputPath, Buffer.from(subset.toArrayBuffer()));
}

// subsetFont(font, "Hello, world", "./out/liberation-subset.ttf");
// Result: a font with the .notdef glyph plus one glyph per distinct character.

import opentype from "opentype.js";
import fs from "fs";
import { textToSvg } from "./src/fonts/to-svg";

const file = fs.readFileSync("./fonts/LiberationSans-Bold.ttf");
const font = opentype.parse(file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength));
fs.writeFileSync("./out/headline.svg", textToSvg(font, "Spring Sale", 64, 0, 64));

import { subsetFont } from "./src/fonts/subset";

subsetFont(font, "0123456789$.,", "./out/price-digits.ttf");