a port of the Processing Visualization Language


Processing.js Behavior Font support for the Canvas element varies across browsers. See Canvas Text, BurntToys Bauhaus.

Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width()

PFont myFont;
void setup() {
  size(200, 200);
  // Uncomment the following two lines to see the available fonts 
  //String[] fontList = PFont.list();
  myFont = createFont("FFScala", 32);
  text("!@#$%", 10, 50);

Use a font that's installed on the computer, or from a .ttf or .otf file inside current folder.

Use the PFont.list() method to first determine the names for the fonts recognized by the computer and are compatible with this function. Not all fonts can be used and some might work with one operating system and not others. When sharing a sketch with other people or posting it on the web, you may need to include a .ttf or .otf version of your font in the sketch directory because other people might not have the font installed on their computer. Only fonts that can legally be distributed should be included with a sketch.

If you have a @font-face rule in your CSS, you can use it by passing the @font-face name into the name parameter

The size parameter states the font size you want to generate. The smooth parameter specifies if the font should be antialiased or not, and the charset parameter is an array of chars that specifies the characters to generate. The smooth and charset parameters are ignored in Processing.js.

createFont(name, size)

createFont(name, size, smooth)

createFont(name, size, smooth, charset)
name String: name of the font to load
size float: point size of the font.
smooth boolean: true for an antialiased font, false for aliased. Ignored by PJS
charset char[]: array containing characters to be generated. Ignored by PJS
Returns PFont
Usage Web & Application
Related PFont

This reference is licensed under the CC BY-NC-SA 2.0 license:

Creative Commons License
Fork me on GitHub