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 and Windows. It is a self-contained Fontra server application, which allows you to view and edit fonts in the default browser. We don't have releases for it yet, but you can grab the latest nightly build from the topmost “Build Application” workflow.
Fontra Pak should also work on Linux and other platforms, but you will have to build it from the sources.
Install from the source code
Requirements
-
Ensure you have Python >= 3.10 installed, preferably from python.org
-
Ensure you have Node.js >= 19 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
withpython3.11
if you have 3.11 instead.) -
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 thercjk
subcommand provided by thefontra-rcjk
plugin:fontra --launch rcjk some-robocjk-server.some-domain.com
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 âś…
- Write .ttf + variable .ttf (For “hot fixes”. Currently not planned, will still require export step.)
- Write .otf + variable .otf (Ditto.)
- Respond to external .ttf and .otf changes (automatic reload)
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 âś…
- Knife tool
- Shape tool
- Measure tool
- Copy / paste âś…
- Create new glyphs
âś… - Add / remove (variable) components
âś… - Anchors
- Guidelines
- View background layers
- Edit local variation axes and sources/layers
- Built-in support for Non-Linear Interpolation
- Remove overlap and other path operators
Font-level viewing / editing
- Create new font project
- Cell-based font overview
- List-based font overview
- Edit kerning
- Edit OpenType features
- Edit variation axes
- Visualize and edit variation axis mapping (avar)
Multiple windows
- Propagate changes across multiple windows in real time âś…
- Browser URL encodes most view settings âś…
Deployment
- Basic standalone desktop application for macOS and Windows
âś… (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/Fontations integration
- Incremental compilation using Fontations
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
âś…
- Pluggable client views
- Asynchronous programming model using async/await
âś…
Future possibilities
- Serverless Fontra
- Peer-to-peer collaboration