Fontra

Fontra is an in-development browser-based font editor. It consists of two main parts:

• Fontra client — runs in the browser, written in JavaScript
• Fontra server — runs locally or on a remote machine, written in Python

Installing Fontra

Download and install Fontra Pak

Fontra Pak is a Fontra distribution for macOS, Windows and Linux(x86_64). It is a self-contained Fontra server application, which allows you to view and edit fonts in the default browser. You can grab the latest release from Release section , or more conveniently, directly from fontra.xyz.

Fontra Pak is also available as Flatpak and other community-supported options like Snap package in amd64.

Install from the source code

Requirements

• Ensure you have Python >= 3.10 installed, preferably from python.org

• Ensure you have Node.js >= 20 installed, preferably from nodejs.org

Setup

• Check out the Fontra repository (the one you are reading this from), cd into the root of the repository

• Create a Python venv in the root of the repo:

  python3.10 -m venv venv --prompt=fontra

  (Replace python3.10 appropriately if you have a newer version installed.)

• Activate venv:

  source venv/bin/activate

• Install general dependencies:

  pip install --upgrade pip

  pip install -r requirements.txt

  pip install -e .

Testing

The following steps are needed if you want to run the automated tests and if you want to contribute:

• Install dependencies to run the automated tests:

  pip install -r requirements-dev.txt

• Install pre-commit to run formatters and linters:

  pre-commit install --install-hooks

• To verify if everything is working correctly, run both test suites:

  pytest

  npm test

Running

• Start the fontra server with a path to a folder containing fonts (.designspace, .ufo, .ttf or .otf), using the filesystem subcommand:

  fontra --launch filesystem /path/to/a/folder

• The default browser will then navigate to:

  http://localhost:8000/

• To use Fontra with .rcjk data on disk, or to connect to a remote rcjk server, install the fontra-rcjk plugin package. Then you can start it with a robocjk server hostname, using the rcjk subcommand provided by the fontra-rcjk plugin:

  fontra --launch rcjk some-robocjk-server.some-domain.com

• To use Fontra in development mode, add --dev to the command line:

  fontra --dev --launch filesystem /path/to/a/folder

With this option in place, a separate process will be spawned which watches for any changes made to the Javascript files, and automatically bundles these into the client directory on save. Additionally, in developer mode, Javascript errors report a more human-readable traceback.

Roadmap

The following list of features is not complete, but gives you a rough idea of where we are now, and where we are headed. A green checkmark means: “This feature has been implemented”.

Input / Output

• Read .designspace ✅
• Write .designspace ✅
• Respond to external .designspace changes (automatic reload) ✅
• Read .ufo ✅
• Write .ufo ✅
• Respond to external .ufo changes (automatic reload) ✅
• Read .ttf + variable .ttf ✅
• Read .otf + variable .otf ✅
• Read .ttx ✅
• Write .ttf + variable .ttf (For “hot fixes”. Currently not planned, will still require export step.)
• Write .otf + variable .otf ✅ (Via “export as” in Fontra Pak)
• Respond to external .ttf and .otf changes (automatic reload) ✅
• Respond to external .fontra, .glyphs and .glyphspackage changes (automatic reload) ✅
• Read .glyphs and .glyphspackage ✅ (Via fontra-glyphs)
• Write .glyphs and .glyphspackage ✅ (partial, via fontra-glyphs)

Text viewing / editing

• Basic live text entry, including /glyphname notation ✅
• Multi-line text ✅
• Basic glyph selection (pick glyph from list) ✅
• Basic designspace navigation (via axis sliders) ✅
• Show live interpolation ✅
• Hand tool for scrolling ✅
• Scroll with gestures ✅
• Zoom with gestures ✅
• Zoom with short-cuts ✅
• Advanced character / glyph search
• Display kerning ✅
• Apply proper text shaping
• Full screen mode ✅
• Right-to-left mode
• Vertical top-to-bottom mode
• Enter “edit mode” for glyph by double-clicking on a glyph in the text ✅

Glyph editing

• Basic outline editing (move points) ✅
• Basic pen tool (draw points) ✅
• Edit (variable) component parameters ✅
• Decompose (variable) component ✅
• First-class support for quadratic curves ✅
• Multi-level undo/redo, per glyph ✅
• Interactive sidebearing editing
• Numeric sidebearing editing ✅
• Numeric advance width editing ✅
• Pen tool for quadratic curves ✅ (experimental)
• Decent outline editing (adding/removing points, removing contours) ✅ (with caveats)
• Select segments ✅
• Advanced outline editing: edit segments
• Connecting open paths ✅
• Show point coordinates and component origins numerically ✅
• Knife tool ✅
• Shape tool ✅
• Measure tool ✅
• Copy / paste ✅
• Create new glyphs ✅
• Delete glyphs ✅
• Add / remove (variable) components ✅
• Anchors ✅
• Guidelines (local, glyph level) ✅
• Guidelines (global, font level)
• View background layers ✅
• Background image for tracing / reference ✅
• Edit local variation axes ✅
• Edit local sources/layers ✅
• Built-in support for Non-Linear Interpolation
• Remove overlap and other path operators (subtract, intersect, exclude) ✅
• Transformation panel ✅

Font-level viewing / editing

• Create new font project ✅ (Fontra Pak)
• Cell-based font overview ✅
• List-based font overview
• Edit font meta data (“font info”) ✅
• Edit kerning ✅
• Edit OpenType features ✅
• Edit variation axes ✅
• Visualize and edit variation axis mapping (avar) ✅
• Visualize and edit cross-axis variation axis mapping (avar-2) ✅
• Visualize and edit status field definitions ✅

Multiple windows

• Propagate changes across multiple windows in real time ✅
• Browser URL encodes most view settings ✅

Deployment

• Basic standalone desktop application for macOS, Windows and Linux ✅ (Via Fontra Pak)
• Basic multi-user server deployment with database storage ✅ (Via fontra-rcjk, django-robo-cjk, behind NGINX)
• Research GitHub REST API: can Fontra be a GitHub gateway in a practical way?
• Research database solutions for server-based font storage
• Desktop app with integrated browser and auto-update feature (made with Electron or similar)

Scripting

• A Python scripting library that talks directly to the Fontra server
• JS scripting for in-browser automation
• Python scripting for in-browser automation via WASM/PyOdide
• Add various plug-in APIs, for example:
  • Visualization layer plug-ins for the glyph editor
  • Tool plug-ins

Export

• FontMake integration (in Fontra Pak) ✅
• fontc integration
• Incremental compilation using fontc
• Experimental glyf1 export ✅ (Via fontra-compile)

Collaborative features

• Visualizing the selection of others
• Add review notes / comments
• Suggested edits

Code structure

• Client/server architecture (JavaScript/Python) ✅
• Local or (networked) remote server ✅
• Client/server communication via JSON objects over a WebSocket ✅
• Highly modular:
  • Pluggable client views ✅
  • Pluggable read/write storage backends ✅
  • Client-agnostic and storage-agnostic server centerpiece ✅
• Asynchronous programming model using async/await ✅

Future possibilities

• Serverless Fontra
• Peer-to-peer collaboration

Translations

We are maintaining various language translations of the UI in a spreadsheet. Please contact us if you'd like to contribute (to) a translation.

• Translation Documentation
• Fontra UI Strings spreadsheet