Awesome

I Can Variable Font (Notes on generating variable fonts)

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.

Example Files

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.

How To

1. 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.

2. Install fontmake

• pip install fontmake
  • More detailed notes in their readme.

3. 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

4. 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.
• 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 a variable_ttf subfolder.

Upgrading

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.

Weird Things

• 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); to include(../../features.fea);
• 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.

‘Using’ the fonts

• 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

Helpful Resources and Articles

• 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

Examples/Demos

• http://cjtype.com/dunbar/variablefonts/index.html
• http://stuff.djr.com/variable-demo/

Terminal Tips

• 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, enter ls -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.

Outside Contributors

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.