Download latest version

Fontastic
is a Processing library
to create font files

Created by Andreas Koller

What can you do with Fontastic?

Create fonts with code!

Fontastic is a library for creating font files in TTF and WOFF format which you can then use in any design program or website.

It allows you to make fonts based on data, sensors, live feeds, or any other algorithm, or manipulate existing fonts to create your own version (see examples).

Fontastic was designed to make it as easy as possible to create a font in Processing.

Under the hood, it uses doubletype, a Java font editor that builds font files according to the TrueType format, and sfntly to create Web Open Font Format files.

Download

Download Fontastic Library (.zip)
Version 0.4, 19 June 2013
for Processing 2.0+

Fontastic is licensed under the GNU Lesser General Public License (LGPL), a copy of which is included in the distribution.

The source code is included in the zip, but can also be accessed at GitHub Repository.

Basics

At first, some basic steps in code snippets. Fully functional code examples can be found further down.

How to create a new Fontastic object:

Fontastic f = new Fontastic(this, "ExampleFont");  // Create a new Fontastic object

How to set further font properties:

f.setAuthor("Andreas Koller");                  // Set author name - will be saved in TTF file too

How to create a glyph for the character A with a random shape of four points:

PVector[] points = new PVector[4];              // Define a PVector array containing the points of the shape
points[0] = new PVector(0, 0);                  // Start at bottom left
points[1] = new PVector(random(512), 0);        // The normal width is 512, the normal height 1024
points[2] = new PVector(random(512), random(1024)); // y coordinates are from bottom to top!
points[3] = new PVector(0, random(1024));

f.addGlyph('A').addContour(points);             // Assign contour to character A

How to generate the TrueType font file:

f.buildFont();                                  // Build the font resulting in .ttf and .woff files
                                                // and a HTML template to preview the WOFF

How to clean up afterwards:

f.cleanup();                  // Deletes all the files that doubletype created, except the .ttf and
                              // .woff files and the HTML template

These are the basic steps needed. For a full reference see the Documentation.

Examples

These examples give an overview of the basic functionalities of Fontastic.
 

Abstract Typefaces

RandomFont.pde

How to create a random shape for each character of the alphabet:

See preview of webfont
In the example only the upper- and lowercase letters are generated.

EqualizerFont.pde

How to create characters made out of horizonal lines for each character of the alphabet:

See preview of webfont
In the example only the upper- and lowercase letters are generated.

LabyrinthFont.pde

How to create characters of random lines in a 3x3 grid that make up a labyrinth:

See preview of webfont
In the example only the uppercase letters are generated.

WaveFont.pde

How to create characters with bezier curves. The example also includes a way to preview the bezier shapes before building the font:

See preview of webfont
In the example only the uppercase letters are generated.

Textvisualisation Typefaces

PieChartFont.pde

How to create a font for a simple textvisualisation:

Each letter is represented by a segment of a circle. The advance width for each character is set to 0, except for the space character, which advances to the next word and thus circle.

See preview of webfont
In the example only the upper- and lowercase letters are generated.

FrequencyFont.pde

How to create a font based on a dataset:

This example takes the frequency of the letters in the English language to draw different sized bars for each character.

See preview of webfont
In the example only the upper- and lowercase letters are generated.

Legible Typefaces

DistortFont.pde

How to create character shapes based on another font.

Based on an example from "Generative Gestaltung". You'll also need geomerative library to run this example.

See preview of webfont
In the example only the uppercase letters are generated.

ConfettiFont.pde

How to create characters made of multiple shapes based on outlines of another font.

Based on an example from "Generative Gestaltung". You'll also need geomerative library to run this example.

See preview of webfont
In the example only the uppercase letters are generated.

Documentation

Please see the Javadoc for detailed reference.

Class Fontastic

Fontastic(PApplet myParent, String fontname)   // Constructor

FGlyph addGlyph(char c)                        // Add a glyph
FGlyph addGlyph(char c, FContour contour)      // Add a glyph and its one contour
FGlyph addGlyph(char c, FContour[] contours)   // Add a glyph and its contours
void   buildFont()                             // Builds the font and writes the .ttf and .woff file
                                               // and the HTML template to preview the WOFF
void   cleanup()                               // Deletes all the glyph files created by doubletype
Engine getEngine()                             // Engine getter
String getFontname()                           // Returns the font name.
FGlyph getGlyph(char c)                        // Get glyph by character
String getTTFfilename()                        // Returns the .ttf file name
void   setAdvanceWidth(int advanceWidth)       // Sets the advanceWidth of the font.
void   setAscender(float ascender) 
void   setAuthor(String author)                // Sets the author of the font.
void   setBaseline(float baseline)             // Sets the baseline of the font.
void   setBottomSideBearing(float bottomSideBearing) 
void   setCopyrightYear(String copyrightYear)  // Sets the copyright year of the font.
void   setDebug()                              // Sets debug to true
                                   // (in debug mode, the library outputs what happens under the hood)
void   setDebug(boolean debug)                 // Sets the value of debug
void   setDefaultMetrics()                     // Sets the default metrics for the typeface:
                                               //      setTopSideBearing(170); // 2 px
                                               //      setAscender(683); // 8 px
                                               //      setXHeight(424); // 5 px
                                               //      setDescender(171); // 2 px
                                               //      setBottomSideBearing(0); // 0px
void   setDescender(float descender)            
void   setFontFamilyName(String fontFamilyName)// Sets the font family name of the font.
void   setMeanline(float meanline)             // Sets the meanline of the font.
void   setSubFamily(String subFamily)          // Sets the sub family of the font.
void   setTopSideBearing(float topSideBearing)            
void   setTypefaceLicense(String typefaceLicense) // Sets the license of the font
                          // (default is "CC BY-SA 3.0 http://creativecommons.org/licenses/by-sa/3.0/")
void   setVersion(String version)              // Sets the version of the font (default is "0.1").
void   setXHeight(float xHeight)

Class FGlyph

void   addContour()
void   addContour(FContour contour)
void   addContour(FPoint[] points) 
void   addContour(PVector[] points)
void   addContour(PVector[] points, PVector[] controlPoints1, PVector[] controlPoints2) // for bezier points
void   clearContours() 
int    getAdvanceWidth()            
FContour   getContour(int index)            
int    getContourCount()            
List<FContour> getContours() 
FContour[] getContoursArray() 
char   getGlyphChar() 
void   setAdvanceWidth(int advanceWidth) 
void   setContour(int index, FContour contour) 
void   setContour(int index, FPoint[] points) 
void   setContour(int index, PVector[] points) 

Class FContour

List<FPoint>   getPoints() 
FPoint[]   getPointsArray() 
void   setPoints(PVector[] points) 

Class FPoint

extends PVector

FPoint()                                        // Constructor
FPoint(float x, float y)                        // Constructor
FPoint(PVector point)                           // Constructor
FPoint(PVector point, PVector controlPoint1, PVector controlPoint2)  // Constructor

boolean hasControlPoint1()        
boolean hasControlPoint2() 
void   setControlPoint1(float x, float y)       // for Bezier curves
void   setControlPoint1(PVector controlPoint1)  // for Bezier curves
void   setControlPoint2(float x, float y)       // for Bezier curves
void   setControlPoint2(PVector controlPoint2)  // for Bezier curves