Appearance

Creating a TTF ​

This guide is for building a single TrueType font (.ttf).

Required tables ​

These are the practical minimum required by Font Flux validation for a valid single-font export.

  • cmap: Unicode code point to glyph mapping.
  • head: Global font header and bounds metadata.
  • hhea: Horizontal layout header values.
  • hmtx: Horizontal advance/side-bearing metrics.
  • maxp: Glyph count and profile limits.
  • name: Family/style/version naming records.
  • post: PostScript-oriented metadata.

Outline requirement (both required):

  • glyf: Glyph outlines/instructions.
  • loca: Offsets into glyf data.
  • OS/2: Platform metrics/flags used widely by layout engines.

Optional tables (grouped by function) ​

Layout and Typography ​

  • BASE: Baseline coordination across scripts.
  • GDEF: Glyph classes and attachment metadata for layout.
  • GPOS: Advanced glyph positioning rules.
  • GSUB: Advanced glyph substitution rules.
  • JSTF: Script-specific justification behavior.
  • kern: Legacy kerning pairs.
  • MATH: Math typography layout data.

TrueType Hinting and Grid-Fit ​

  • cvt : Control Value Table for hinting.
  • fpgm: Font program instructions.
  • prep: Pre-program instructions.
  • gasp: Grid-fitting and scan-conversion behavior.

Variations (Variable Fonts) ​

  • fvar: Variation axis definitions.
  • avar: Non-linear axis mapping.
  • STAT: Style attributes and axis naming.
  • gvar: Glyph variation data.
  • cvar: CVT variation deltas.
  • HVAR: Horizontal metrics variation deltas.
  • MVAR: Global metrics variation deltas.
  • VVAR: Vertical metrics variation deltas.

Color and Emoji Presentation ​

  • COLR: Layered or paint-graph color glyph composition.
  • CPAL: Color palettes consumed by COLR.
  • SVG : SVG glyph outlines.
  • CBDT: Color bitmap glyph image data.
  • CBLC: Index/location data for CBDT strikes.
  • EBDT: Embedded bitmap glyph image data.
  • EBLC: Embedded bitmap location/index data.
  • EBSC: Embedded bitmap scaling metadata.
  • sbix: Apple bitmap glyphs.

Vertical Layout ​

  • vhea: Vertical header metrics.
  • vmtx: Vertical metrics per glyph.

Device, Metrics, and Legacy Compatibility ​

  • hdmx: Device-specific horizontal metrics.
  • LTSH: Linear threshold hints.
  • VDMX: Vertical device metrics data.
  • PCLT: PCL printer-oriented metrics.

Metadata and Miscellaneous ​

  • meta: Arbitrary metadata tags.
  • DSIG: Digital signature container (legacy/deprecated use).
  • MERG: Merge metadata (rare).

Notes ​

  • loca must match glyf layout and head.indexToLocFormat.
  • If you use variable-font tables (fvar, gvar, avar, HVAR, MVAR, VVAR, cvar), keep axis and tuple assumptions consistent.
  • Validate early with .validate().

Working with TrueType outlines ​

TrueType fonts store glyph outlines as quadratic Bézier contours in the glyf table. Each contour is an array of points with x, y, and onCurve properties.

Reading outlines ​

When you open a TTF with FontFlux.open(), each glyph's contours array contains point arrays:

js
const font = FontFlux.open(buffer);
const glyph = font.getGlyph('A');
console.log(glyph.contours);
// [[ { x: 0, y: 0, onCurve: true }, { x: 100, y: 200, onCurve: false }, ... ]]
  • onCurve: true — on-curve anchor or line endpoint.
  • onCurve: false — off-curve quadratic control point.
  • Consecutive off-curve points have an implied on-curve midpoint between them.

See the glyf table docs for detailed format documentation.

Editing outlines via SVG ​

Convert contours to SVG path strings for visual editing, then convert back:

js
import { FontFlux } from 'font-flux-js';

const svg = FontFlux.contoursToSVG(glyph.contours); // "M0 0 Q100 200 200 0 Z"
// ... edit the SVG path string ...
const newContours = FontFlux.svgToContours(svg, 'truetype');

TrueType outlines produce Q (quadratic) SVG commands. The round-trip is lossless for quadratic paths. If the SVG contains cubic C commands, they are approximated as quadratic curves (subdivision with 0.5-unit error threshold).

See the SVG path conversion docs for details on supported SVG commands and coordinate handling.

Creating TrueType glyphs from scratch ​

For a complete guide to hand-authoring glyph data — including .addGlyph(), all outline formats, metadata reference, and examples — see Creating Glyphs.

Creating a TTC (TrueType Collection) ​

A .ttc file bundles multiple TrueType font faces into a single binary. Each face is a complete TTF — it must satisfy all the requirements above.

Required collection shape ​

At the top level, collection JSON uses this shape:

json
{
	"collection": {
		"tag": "ttcf",
		"majorVersion": 2,
		"minorVersion": 0,
		"numFonts": 2
	},
	"fonts": [
		{ "header": {}, "tables": {} },
		{ "header": {}, "tables": {} }
	]
}

Each entry in fonts[] is validated as a normal single font — it needs the same required tables listed above (cmap, head, hhea, hmtx, maxp, name, post, glyf, loca).

Optional collection-level fields ​

  • collection.dsigTag: DSIG tag for TTC v2+ metadata.
  • collection.dsigLength: DSIG block length.
  • collection.dsigOffset: DSIG block offset.

Notes ​

  • collection.numFonts should match fonts.length.
  • Validate full collection JSON with .validate() before export.