a port of the Processing Visualization Language


Processing.js Behavior Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.

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

example pic
PFont metaBold;

// The font "Meta-Bold.ttf" must be located in the 

// current sketch's "data" directory to load successfully

metaBold = loadFont("Meta-Bold.ttf");

textFont(metaBold, 44); 

text("word", 15, 50);
Description Sets the current font. The font must be loaded with loadFont() before it can be used. This font will be used in all subsequent calls to the text() function. If no size parameter is input, the font will appear at its original size (the size it was created at with the "Create Font..." tool) until it is changed with textSize().

Because fonts are usually bitmaped, you should create fonts at the sizes that will be used most commonly. Using textFont() without the size parameter will result in the cleanest-looking text.

With the JAVA2D and PDF renderers, it's also possible to enable the use of native fonts via the command hint(ENABLE_NATIVE_FONTS). This will produce vector text in JAVA2D sketches and PDF output in cases where the vector data is available: when the font is still installed, or the font is created via the createFont() function (rather than the Tool).

textFont(font, size)
font PFont: any variable of the type PFont
size int or float: the size of the letters in units of pixels
Usage Web & Application
Related createFont()

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

Creative Commons License
Fork me on GitHub