Skip to main content

Get 15% off your first order — use code WELCOME15 at checkout

Index:
06
Industry:
Design Tools
Year:
2024
Duration:
4 weeks
Status:
Delivered
Glasgow GFX · Design Tools

Font Creator for Adobe Illustrator

A native Illustrator extension that eliminates the multi-tool font creation workflow, draw letterforms, assign glyphs, and export production-ready OpenType fonts without leaving the app.

The Challenge

Creating custom fonts has always meant working across a patchwork of tools. A designer draws letterforms in Illustrator, exports them path by path, imports into specialised font editing software, manually adjusts metrics and coordinate systems, corrects path winding directions, and finally compiles the font file. The process was slow, error-prone, and deeply frustrating, especially for lettering artists and brand designers who needed custom typefaces efficiently. The market lacked an affordable, tightly integrated solution that respected the designer's existing workflow.

The Solution

We built a CEP extension that embeds directly into Illustrator as a native panel, matching the application's dark theme so it feels built-in rather than bolted on. Under the hood, a sophisticated pipeline handles the heavy lifting: path extraction reads vectors directly from selected artwork via ExtendScript, a coordinate transform layer translates Illustrator's coordinate system into font space, winding correction automatically resolves path directions for proper fill rendering, and the glyph building engine constructs standards-compliant paths using opentype.js. The result: select your artwork, assign it to characters, preview your typeface in real time, and export a professional OTF file. Draw, assign, preview, export.

01
Phase 1

Extension Architecture & Illustrator Integration

We built the CEP extension shell and embedded it as a native panel inside Illustrator, matching the host application's dark UI so it feels like a built-in feature. The ExtendScript bridge connects the panel to Illustrator's document object model for real-time artwork access.

  • Native CEP panel integrated seamlessly into Illustrator with matching dark theme
  • ExtendScript bridge for real-time communication with the host application
  • Character assignment UI supporting 100+ glyph slots with drag-and-drop mapping
  • Compatibility layer ensuring consistent behaviour across CC 2019 through CC 2025
02
Phase 2

Path Processing & Coordinate Transforms

The core engineering challenge: Illustrator and font files use fundamentally different coordinate systems. We built a transform pipeline that reads raw vector paths, flips and scales them into font-space coordinates, and automatically corrects winding direction so filled and counter shapes render properly.

  • Coordinate transform engine converting Illustrator space to font-space units automatically
  • Winding direction correction ensuring proper fill rendering for all glyph shapes
  • Compound path detection resolving interior cutouts in letters like O, B, D, and e
  • Metric calculations for ascender, descender, baseline, and cap height derived from artwork
03
Phase 3

Font Compilation & Export

The final phase assembles a standards-compliant OpenType font file using opentype.js. Each glyph is constructed with correct advance widths, sidebearings, and path data. A live preview renders the assembled typeface in the panel so designers can spot issues before exporting.

  • One-click OTF export producing standards-compliant OpenType font files
  • Live in-panel typeface preview for visual verification before export
  • Correct font table generation including cmap, OS/2, and name tables
  • Cross-platform rendering verified on Windows, macOS, major browsers, and design software
Results
7
Illustrator versions supported
100+
Characters per typeface
4 weeks
Delivered in
0
External tools required
  • 01Eliminated the multi-tool workflow entirely, designers produce finished fonts without leaving Illustrator
  • 02Automated coordinate transforms, path corrections, and metric calculations that previously required manual intervention per glyph
  • 03Lowered the barrier to custom type design, accessible to lettering artists without specialised typographic engineering knowledge
  • 04Exported OpenType files meet industry standards and render correctly across operating systems, browsers, and design applications
  • 05Seven major Illustrator versions supported, CC 2019 through 2025, ensuring long-term reliability
Spec Sheet
Architecture
Extension Framework
Adobe CEP (Common Extensibility Platform) with HTML/CSS/JS panel
Host Communication
ExtendScript bridge for reading Illustrator DOM and selected artwork paths
Font Engine
opentype.js for glyph construction and OpenType file compilation
Compatibility
CEP version targeting across Illustrator CC 2019 through CC 2025 (7 releases)
Integrations
Illustrator DOM
Direct path data extraction from selected artwork via ExtendScript
opentype.js
Standards-compliant OpenType font table generation and binary compilation
CSInterface
Adobe CSInterface.js for panel lifecycle, theme sync, and host app events
Performance
Path Processing
Coordinate transform, winding correction, and metric calculation in milliseconds per glyph
Font Compilation
Full 100+ character font compiled and written to disk in under one second
Live Preview
Real-time typeface rendering in-panel as glyphs are assigned and modified
Code Quality
  • Zero external dependencies beyond opentype.js, minimal attack surface
  • Automated winding direction correction eliminates manual path debugging
  • Defensive path validation rejects malformed or empty artwork before processing
  • Cross-version tested across 7 major Illustrator releases
Technologies
  • CEP
  • ExtendScript
  • opentype.js
  • HTML
  • CSS
  • JavaScript
Next Project

Aligné Studio

From brand identity to native mobile apps, a full-service launch for London's first infrared light therapy Pilates studio.

Wordmark
Aligné
Studio · Glasgow
WellnessEst. 2024
Mark
Mark reduces to
favicon & mat tag
Applications
Class card
Reformer · 07:00
Studio tote
Canvas · Sage
Window vinyl
Shopfront
Voice
  • · Warm, unhurried, encouraging — never shouty
  • · Sentence case for headings, no exclamation marks
  • · Lead with the feeling, not the workout stats
Palette
Ink
Sage
Clay
Paper
Typeface
Aa Gg
Canela · Regular / Medium
Type specimen
DisplayMove well
HeadingReformer Flow
BodyBook your first class free.
MonoSTUDIO · GLASGOW

Have a project?

Web, software and brand work for businesses across the UK. Tell us what you are building.

Glasgow GFX Print Studio

Visit
The Pentagon Business Centre
Unit 204b, 36–38 Washington Street
Glasgow G3 8AZ
Hours
Mon–Fri 9:00–18:00
Sat 10:00–18:00
Sun closed
Service area
Glasgow, Hamilton, Paisley, East Kilbride, Motherwell. Free delivery across Central Scotland on orders over £50.