Tutorial Processing: loadFont, createFont, textFont, text
Processing provides features to display text using either a font available on the current
computer or one stored as part of the sketch's data folder. In either case, before using the
text function, you must define the font. This is done using a declaration statement; either
creating a font 'on the fly' or loading a font that has been added to the sketch; and
invoking the textFont function. Here is the coding for the first approach:
PFont myfont;
//perhaps in setup
myfont = createFont("Ariel",18);
textFont(myfont);
//somewhere else, perhaps in draw
text("Hello",20,60);
The second and third arguments of the text command position the text on the display
screen.
This example assumes that Ariel is a font on the computer running the program.
The alternative, more robust approach is to make the font part of the sketch itself. Then
you are not dependent on the computer running the applet or application having the
specific font(s) chosen.
First, use Tools/Create Font…
You will see the names of the fonts on the computer, with samples. You are prompted to
pick a font and a size. The name of the file for the font will be displayed:
Notice that I have typed into the sample space something close to the text that I will be
using in the tilt example shown on this site. It is important to look at the sample. Some
fonts do not use upper and lower case.
Having set this up, that is, added the file Pedro-Regular-28.vlw to the data file, the coding
is similar to the previous approach:
PFont myfont;
myfont = loadFont("Pedro-Regular-28.vlw");
textFont(myfont);
text("Hello", 20, 60);
You can modify the font size in textFont. I have not experimented with this.
Exercises:
1. Create sketches using each of the two methods and compare sizes. Export
applets and export applications and compare sizes.
2. Do research AND do the experiments on the use of the Smooth and the All
characters options.
3. Do research AND do the experiments on adding a size parameter to textFont.
To get a list of the fonts available on the computer, execute the code shown in this screen
shot:
The PFont.list() function produces an array of strings. The println function prints into the
text area under the edit area of the Processing environment. Each array element is placed
on its own line.
You can produce a display of randomly chosen font samples:
This was done using the PFont.list() method to get the array of font names and then
accessing it at each click of the mouse with a randomly chosen index. The sketch
contains 2 global variables: on holding the list of fonts and the other the PFont variable
with the name myfont. The setup function sets the size of the display screen, calls fill to
specify a color (red), and calls PFont.list() to populate the fontList array. The draw
function does nothing, but is necessary to make the mousePressed function operate. The
mousePressed function uses random to choose a random number for the index. The int
function must be used to convert the float to an integer. The next 3 lines are the ones
described already for displaying text:
1. the string at the ch element of the array is assigned to myfont
2. textFont sets the myfont font as the one to be used
3. the text function displays the string "Hello" at the mouseX and
mousey coordinates.
Here is the code for the sketch:
String[] fontList ;
PFont myfont;
void setup() {
size(800, 600);
fill(255,0,0);
fontList = PFont.list();
}
void draw() {
}
void mousePressed() {
int ch = int(random(0,fontList.length));
myfont = createFont(fontList[ch],20);
textFont(myfont);
text("Hello",mouseX,mouseY);
}