Notes and tips for generating a simple variable font on a Mac. These assume you’re already familiar with the UFO format, creating masters that can be interpolated, and have some comfort using Terminal.
There are probably better ways of doing this. If anyone has better sources, corrections, or the process changes, please send a pull request or open an issue. Hopefully this is just an interim document until the process becomes streamlined.
In the example
directory, you can find a sample DesignSpace file and interpolatable UFO’s. You can use those files for your first attempt, to simplify the process, and make sure everything works. It only contains one glyph, an A
, which is just a rectangle that should get taller and shorter.
- Install
pip
- Check to see if you have it installed already.
- In Terminal type
pip
and hit enter.- If it says
command not found
, follow the instructions here. Otherwise skip to step 2.
- If it says
- In Terminal type
- Install
fontmake
pip install fontmake
- More detailed notes in their readme.
- Create a DesignSpace file
- create a new text file called
yourfont.designspace
- Populate the file using the following examples as a guide. Most importantly, make sure the paths to the UFOs are correct. https://github.com/scribbletone/i-can-variable-font/blob/master/example/varibox.designspace and https://github.com/LettError/MutatorMath/blob/master/Docs/designSpaceFileFormat.md
- Add at least one instance
- Generate the final variable font
- In Terminal, navigate to the
fontmake
directory.- If you’ve closed the Terminal window since installing, you’ll also need to run
source env/bin/activate
.
- If you’ve closed the Terminal window since installing, you’ll also need to run
- run
fontmake -o variable -m path-to-your-designspace-file
.- Make sure to substitute your path to the DesignSpace file.
- Cross your fingers :)
- If everything goes well, you should end up with a new TTF file with
-VF
in the name, located in avariable_ttf
subfolder.
The instructions above assume you’re using the latest version of fontmake
. If you’ve already installed fontmake
in the past, you may need to upgrade by running pip install --upgrade fontmake
.
- Your sources seem to need a
GPOS
or kerning table. In the example file, I got around that by just creating a single kerning pair with a value of 0. - If you don’t have groups in your UFO, don’t include
<groups copy="1"/>
in your DesignSpace file. It’ll throw an error. - In RoboFont, using relative paths when including external feature files can throw a
No such file or directory
error, as seen here- To fix, change your relative paths from something like:
include(../features.fea);
toinclude(../../features.fea);
- To fix, change your relative paths from something like:
- Superpolator instances that are based on extrapolations are clamped in the generated v-fonts. For example, if your boldest master has a weight value of 800, an instance with an extrapolated weight value of 1000 will appear the same as 800 in the generated font.
- Superpolator substitution rules (http://new.superpolator.com/documentation/rules/) get lost somewhere between the designspace file and the generated v-font. Support for this is expected in the future.
- Apps that currently support v-fonts only seem to support one family name per font (Still could be tested more thoroughly.)
- If you’re utilizing any custom axes that aren’t among the handful of registered axis tags, you need to write them into the
standard_axis_map
dictionary in the/fontTools/varLib/__init__.py
file.
- Mac previewer, by Google
- Adobe Illustrator CC
- Adobe Photoshop CC
- Axis Praxis, by Laurence Penney. An easy browser interface for previewing and testing
- Requires a browser that supports Variable Fonts
- Fontmake, by Google
- FontTools, a community project with contributions by @justvanrossum, @behdad, @anthrotype, @brawer, and many more.
- In particular varLib
- MutatorMath by LettError
- OpenType Font Variations Overview, by Microsoft
- Introducing OpenType Variable Fonts by John Hudson
- Variable Fonts, by CJ Dunn
- To quickly get the path to a directory/folder or file, drag it into terminal.
- To navigate to a directory in Terminal, type
cd
then drag the folder into terminal and hit enter. - To see the contents of the current directory enter
ls
. To see hidden files as well, enterls -a
. - To navigate relative to your current location
cd some_folder/another_folder
- To cycle through recently used commands, hit the up arrow key.
- To clear the window of noise from previous output, hit the
command k
keys.
Thanks to @nicksherman for feedback and revisions, and @cjdunn for pointing the way.
Help us make this guide better! Open a pull request or issue with any suggestions or corrections.