Font Creator

A programmatic font creation tool for defining fonts in code and exporting them to standard font formats (TTF, WOFF, WOFF2).

⚠️ Project Status: Educational Archive

This project was an experimental exploration into procedural font generation and distortion (v2.1.0). After real-world testing with the Living OS narrative project, we discovered that procedural distortion doesn't produce the visual impact needed for dynamic narrative fonts.

Key Finding: While font-creator itself works well for basic programmatic font generation, applying procedural noise/distortion to make fonts "evolve" is fundamentally limited. The distortion effects are subtle and barely perceptible, and manually designing readable geometric characters defeats the purpose of procedural generation.

→ See LIVING_OS_EXPERIMENT_CONCLUSION.md for detailed learnings and why we're not pursuing this approach further.

What This Means

✅ Still useful for:

• Static programmatic font generation
• Pixel/geometric font creation
• Learning font structure and format
• Exporting fonts to TTF/WOFF/WOFF2

❌ Not recommended for:

• Procedurally distorted "living" fonts
• Fonts that need to "evolve" via noise/distortion
• Expecting subtle procedural changes to drive narrative

If you want dynamic font appearance changes, consider instead:

• Pre-designed font variants for different states
• CSS/rendering effects (skew, blur, glitch effects)
• Custom SVG text rendering with transforms
• Existing variable font tools

Overview

Font Creator allows you to:

• Define fonts programmatically using JavaScript classes
• Generate fonts using various algorithms (pixel, geometric, path-based, algorithmic)
• Export fonts to TTF/WOFF2 formats using both JavaScript and Python
• Explore and understand existing font structures
• Preview fonts interactively in the browser

This is a standalone tool for experimental and educational font generation, not production typography.

Quick Start

Browser Usage

1. Open font-preview.html in a web browser
2. Click "Generate Example" to create a sample font
3. Preview and export your font

Node.js Usage

const { FontDefinition, GlyphDefinition, Contour } = require('./core/font-definition.js');
const { generateSimplePixelFont } = require('./generators/pixel-font-generator.js');
const FontExporterJS = require('./export/js-exporter.js');

// Create a font
const font = generateSimplePixelFont('MyFont');

// Export to TTF
const exporter = new FontExporterJS();
const buffer = exporter.exportToArrayBuffer(font, 'ttf');

Python Usage

from export.python_exporter import FontExporterPython
import json

exporter = FontExporterPython()

# Export from JSON
exporter.export('font.json', 'output.ttf', format='ttf')

Project Structure

font-creator/
├── docs/
│   ├── TOOL_EVALUATION.md              # Tool comparison and evaluation
│   └── SMART_DISTORTION_GUIDE.md       # Smart distortion (v2.1) - now archived
├── font-explorer/                       # Tools for exploring existing fonts
│   ├── font-parser.js                  # Parse TTF/WOFF files
│   └── font-visualizer.html            # Visual font explorer
├── core/                                # Core font definition classes
│   ├── font-definition.js              # FontDefinition, GlyphDefinition, Contour
│   ├── font-serializer.js              # JSON serialization
│   ├── smart-distortion.js             # Procedural distortion (v2.1, experimental)
│   ├── auto-kerning.js
│   ├── variable-font.js
│   ├── glyph-components.js
│   └── glyph-metrics.js
├── generators/                          # Font generators
│   ├── pixel-font-generator.js
│   ├── geometric-font-generator.js
│   ├── path-font-generator.js
│   ├── algorithmic-font-generator.js
│   ├── character-library.js
│   └── complete-alphabet.js
├── export/                              # Font exporters
│   ├── js-exporter.js                  # JavaScript exporter (opentype.js)
│   ├── woff2-exporter.js               # WOFF2 exporter with Brotli
│   └── python-exporter.py              # Python exporter (fonttools)
├── examples/                            # Example usage and experiments
│   ├── LIVING_OS_FONT_FINDINGS.md      # Initial v2.0 feature request
│   ├── LIVING_OS_FONT_V2_FEATURE_REQUEST.md  # v2.1 feature request
│   └── LIVING_OS_EXPERIMENT_CONCLUSION.md    # ← Read this for learnings
├── tools/                               # Development tools
│   └── glyph-debugger.html             # Interactive glyph visualization
├── font-preview.html                    # Interactive preview tool
├── package.json                         # JavaScript dependencies
└── requirements.txt                     # Python dependencies

Core Concepts

FontDefinition

Main class representing a complete font:

const font = new FontDefinition('MyFont', {
  unitsPerEm: 1000,
  ascender: 800,
  descender: -200
});

GlyphDefinition

Represents a single character:

const glyph = new GlyphDefinition('A', 600);
glyph.createContour(contour => {
  contour.addPoint(100, 0, true);
  contour.addPoint(500, 0, true);
  contour.addPoint(300, 700, true);
  contour.close();
});
font.addGlyph(glyph);

Contour

Represents a path within a glyph:

const contour = new Contour();
contour.addPoint(100, 0, true);  // on-curve point
contour.addPoint(500, 0, true);
contour.addPoint(300, 700, true);
contour.close();

Font Generators

Pixel Font Generator

Creates pixel-art style fonts from 2D grids:

const { generateSimplePixelFont } = require('./generators/pixel-font-generator.js');
const font = generateSimplePixelFont('PixelFont');

Geometric Font Generator

Creates fonts using simple geometric shapes:

const { generateGeometricFont } = require('./generators/geometric-font-generator.js');
const font = generateGeometricFont('GeometricFont', {
  thickness: 50
});

Path Font Generator

Creates fonts from SVG paths:

const { generatePathFont } = require('./generators/path-font-generator.js');
const font = generatePathFont('PathFont', {
  'A': 'M 100 0 L 500 0 L 300 700 Z'
});

Algorithmic Font Generator

Creates fonts using algorithms (noise, fractals):

const { generateAlgorithmicFont } = require('./generators/algorithmic-font-generator.js');
const font = generateAlgorithmicFont('OrganicFont', {
  algorithm: 'noise'
});

Exporting Fonts

JavaScript Export (Browser/Node.js)

const FontExporterJS = require('./export/js-exporter.js');
const exporter = new FontExporterJS();

// Export to file (browser)
exporter.exportToFile(font, 'myfont', 'ttf');

// Export to ArrayBuffer
const buffer = exporter.exportToArrayBuffer(font, 'ttf');

Python Export

# Install dependencies
pip install -r requirements.txt

# Export from JSON
python export/python-exporter.py font.json output.ttf

from export.python_exporter import FontExporterPython

exporter = FontExporterPython()
exporter.export('font.json', 'output.ttf', format='ttf')
exporter.export('font.json', 'output.woff2', format='woff2')

JSON Format

Fonts are serialized to a JSON format that both exporters understand:

{
  "name": "MyFont",
  "metrics": {
    "unitsPerEm": 1000,
    "ascender": 800,
    "descender": -200
  },
  "glyphs": {
    "A": {
      "char": "A",
      "unicode": 65,
      "width": 600,
      "contours": [
        {
          "points": [
            {"x": 100, "y": 0, "onCurve": true},
            {"x": 500, "y": 0, "onCurve": true},
            {"x": 300, "y": 700, "onCurve": true}
          ]
        }
      ]
    }
  }
}

Installation

JavaScript Dependencies

npm install

Or use via CDN in HTML:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/opentype.min.js"></script>

Python Dependencies

pip install -r requirements.txt

Tools

Font Explorer

Open font-explorer/font-visualizer.html to:

• Parse and visualize existing font files
• View glyph paths and metrics
• Understand font structure

Font Preview

Open font-preview.html to:

• Load or generate fonts
• Preview text rendering
• View glyph grids
• Export fonts

Examples

See the examples/ directory for complete examples:

• simple-pixel-font.js - Basic pixel font
• geometric-font.js - Geometric shapes font
• algorithmic-font.js - Algorithmic/organic font

Documentation

• Tool Evaluation - Comparison of existing tools vs custom approach
• Core API - Core font definition classes
• Generators - Font generator examples
• Exporters - Font export functionality

Learnings & Recommendations

What We Learned from the Living OS Experiment

We attempted to use procedural distortion to create a font that visually evolves with narrative growth. After building and testing, we learned:

1. Procedural distortion is subtle - Even at maximum distortion levels (15+), the visual changes are barely perceptible. Text looks "slightly wavy" rather than "obviously transformed."

2. Character design is hard - While simple shapes (L, I, O) work, flowing characters (S, R, G, B) are unreadable. You end up needing manual character design, defeating the procedural purpose.

3. Visual impact matters more than cleverness - For narrative games/experiences, obvious visual changes (glitch effects, rendering transforms, completely different fonts) work better than subtle procedural variations.

4. This isn't the tool for "living fonts" - If you want fonts that evolve during gameplay, use pre-designed variants or rendering effects instead.

Better Approaches for Dynamic Fonts

If you want fonts to change during your narrative/game:

• Multiple font variants: Design 3-4 fonts (clean → organic → alien → transformed) and switch between them
• Rendering effects: Use CSS skew, blur, opacity, scan lines, color shifts for more obvious distortion
• Glitch effects: Duplicate layers, offset/color-shift text for "system breaking down" appearance
• SVG rendering: Custom SVG text with full control over transforms and effects
• Variable fonts: Use CSS font-variation-settings if you really need smooth transitions

What Font-Creator IS Good For

• Learning how fonts work
• Creating simple procedural fonts (pixel, geometric)
• Exporting programmatically-defined glyphs to TTF/WOFF2
• Rapid experimentation with font structure
• Educational projects about typography

What Font-Creator Isn't Good For

• Production fonts (use FontForge, Glyphs, or hire a designer)
• Dynamically evolving fonts (use multiple variants or effects instead)
• Complex character design (requires manual work in proper tools)
• Professional typographic features (use established tools)

Notes for Users

• This tool is best used for learning and experimentation, not production
• The Python exporter produces higher quality fonts than the JavaScript exporter
• WOFF2 compression requires the Python exporter
• Before investing time in procedural distortion, read the Living OS conclusion - you might save yourself effort
• For production fonts, use professional tools like FontForge, Glyphs, or hire a font designer

For Future Explorers

If you're thinking about doing something similar (procedural fonts, generative typography, etc.):

1. Test early and visually - Don't spend weeks on code before seeing what it actually looks like
2. Subtle effects don't work for UX - If you want something to be visible to users, make it obviously visible
3. Character design matters - Procedural generation works for simple glyphs (I, O, L) but not for complex ones (S, R, G)
4. Question the approach - If you're fighting the tool, maybe the tool isn't right for the task

This project's value is partly in showing what doesn't work. Hopefully it saves someone else from going down the same road! 🎨

License

MIT

Contributing

This project is primarily an educational/archival project. The code is intentionally left as-is to document a complete experiment cycle. If you're building on it for your own project, feel free to fork and modify!

Acknowledgments

Special thanks to the Living OS project for the real-world testing that led to these learnings. The experimental work and honest assessment of results is valuable for the broader creative coding community.