Reference loadFont()

loadFont()

Loads a font and creates a p5.Font object. loadFont() can load fonts in either .otf or .ttf format. Loaded fonts can be used to style text on the canvas and in HTML elements.

The first parameter, path, is the path to a font file. Paths to local files should be relative. For example, '/assets/inconsolata.otf'. The Inconsolata font used in the following examples can be downloaded for free here. Paths to remote files should be URLs. For example, 'https://example.com/inconsolata.otf'. URLs may be blocked due to browser security.

The second parameter, successCallback, is optional. If a function is passed, it will be called once the font has loaded. The callback function may use the new p5.Font object if needed.

The third parameter, failureCallback, is also optional. If a function is passed, it will be called if the font fails to load. The callback function may use the error Event object if needed.

Fonts can take time to load. Calling loadFont() in preload() ensures fonts load before they're used in setup() or draw().

Examples

Syntax

loadFont(path, [successCallback], [failureCallback])

Parameters

path
String:

path of the font to be loaded.

successCallback
Function:

function called with the p5.Font object after it loads.

failureCallback
Function:

function called with the error Event object if the font fails to load.

Returns

p5.Font: p5.Font object.
Notice any errors or typos? Please let us know. Please feel free to edit src/typography/loading_displaying.js and open a pull request!

Related References