The Complete Production SOP: How to Deploy and Run opentype.js Vector Font Glyphs & Metrics in Autonomous AI Agents

---
name: "opentype-js-font-path-metrics"
description: "Inspect font metrics, render vector glyph paths, and extract Bezier outlines with opentype.js."
metadata:
  author: "Frederik De Bleser"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "convert text to svg path opentype.js"
  - "inspect font metrics opentype"
  - "extract font glyphs javascript"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import * as opentype from 'opentype.js';
import * as path from 'path';

export async function inspectFont(fontPath: string) {
  const resolvedPath = path.resolve(process.cwd(), fontPath);
  const font = await opentype.load(resolvedPath);
  
  return {
    familyName: font.names.fontFamily?.en || 'Unknown',
    unitsPerEm: font.unitsPerEm,
    ascender: font.ascender,
    descender: font.descender,
    numGlyphs: font.numGlyphs,
    tables: Object.keys(font.tables)
  };
}

import * as opentype from 'opentype.js';
import * as fs from 'fs';

export async function convertTextToVectorSvg(
  fontFilePath: string,
  text: string,
  fontSize: number = 72,
  outputPath: string
): Promise<void> {
  const font = await opentype.load(fontFilePath);
  const fontScale = (1 / font.unitsPerEm) * fontSize;
  const baselineY = Math.round(font.ascender * fontScale);
  
  // Extract vector path at standardized baseline
  const textPath = font.getPath(text, 0, baselineY, fontSize, { kerning: true });
  const bbox = textPath.getBoundingBox();
  const width = Math.ceil(bbox.x2 - bbox.x1) + 20;
  const height = Math.ceil(bbox.y2 - bbox.y1) + 20;

  const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${bbox.x1 - 10} ${bbox.y1 - 10} ${width} ${height}" width="${width}" height="${height}">
  ${textPath.toSVG(2)}
</svg>`;

  fs.writeFileSync(outputPath, svgContent, 'utf-8');
}

#!/usr/bin/env bash
set -euo pipefail

if [ ! -f "dist/output.svg" ]; then
  echo "Error: dist/output.svg was not generated." >&2
  exit 1
fi

# Assert path element exists and contains cubic/quadratic commands
if grep -q '<path d="M' "dist/output.svg"; then
  echo "Quality gate passed: Valid SVG Bezier glyph path detected."
  exit 0
else
  echo "Error: SVG does not contain expected vector path commands." >&2
  exit 1
fi