Interaction Design WikiProgramming

Typography

Using System fonts in processing is quite simple as seen in the examples below. This approach dynamically loads and displays the font, using vectors information, but be aware that this might not work for all fonts and appearance may vary from computer to computer. The advantages of this approach is that the fonts can easily be scaled without looking pixelated on the screen. 

PFont font;
 
size(200, 200);
String[] fontList = PFont.list();
printArray(fontList); // print out a list of all system fonts available. 

font = createFont("comic-sans", 32);
textFont(font);
text("I (heart) Helvetica", 10, 50);

Font can be saved within the sketch folder too, incase the font isn't installed on the computer running the sketch. 

PFont font;
size(200, 200);
background(0);
// the .ttf file should be saved in the sketch folder
font = createFont("Trebuchet-BoldItalic", 32);
textFont(font, 32);
text("word", 10, 50);
textSize(70);
text("word", 10, 100);

Alternatively fonts can be saved in the bitmap format that Processing uses. This will generally offer better performance and be more consistent across different computers, with the compromise that it can not be scaled up without looking pixelated. It is an option however, to save the font in multiple sizes. To create the .vlw file, open Processing and select the >Tools > Create Font> menu item.  

PFont font;
size(200, 200);
background(0);
// The vlw file should be saved in the sketch folder
font = loadFont("Trebuchet-BoldItalic-32.vlw");
textFont(font, 32);
text("word", 10, 50);
textSize(70);
text("word", 10, 100);