p5.js | Función cargarFuente()

La función loadFont() se utiliza para cargar una fuente desde un archivo o una URL y devolverla como un objeto PFont. La fuente cargada es un archivo de fuente de tipo abierto con los formatos .otf o .ttf . 
Este método es de naturaleza asíncrona y, por lo tanto, es posible que no finalice antes de que se pueda usar la fuente. Por lo tanto, se recomienda cargar la fuente en la función preload() . La fuente se carga preferiblemente desde una ruta relativa, ya que algunos navegadores pueden impedir la carga desde otras ubicaciones remotas debido a las funciones de seguridad del navegador.
Sintaxis: 
 

loadFont(path, callback, onError)

Parámetros: Esta función acepta tres parámetros como se mencionó anteriormente y se describe a continuación: 
 

• ruta: Es la ruta desde donde se debe cargar la fuente. puede ser un
• devolución de llamada: esta es una función que después de que se carga la fuente y es un parámetro opcional.
• onError: esta es una función que se llama si la fuente no se carga debido a algún error y es un parámetro opcional.

Valor devuelto: Devuelve un objeto p5.Font con la fuente dada.
Los siguientes ejemplos ilustran la función loadFont() en p5.js:
Ejemplo 1:
 

let newFont;
  
// Loading font
function preload() {
  newFont =
    loadFont('fonts/Montserrat.otf');
}
  
//  Canvas area and color
function setup() {
  createCanvas(400, 200);
  textSize(20);
  fill("red");
  text('Click once to write using '
        + 'a new font', 20, 20);
  fill("black");
  
  text('Using the default font', 20, 60);
  text('This is text written using'
        + ' the new font', 20, 80);
}
  
// Changing font
function mouseClicked() {
  textFont(newFont);
  textSize(20);
  text('Using the Montserrat font',
                        20, 140);
   
  text('This is text written using'
        + ' the new font', 20, 160);
}

Producción: 
 

Ejemplo 2: 
 

let newFont;
  
// Canvas area and loading font
function setup() {
  createCanvas(500, 200);
  textSize(20);
  
  text('The new font would be displayed'
        + ' when loaded', 20, 20);
  loadFont('fonts/Montserrat.otf', fontLoaded);
}
  
// Changing font
function fontLoaded(newFont) {
  textFont(newFont);
  text('The font has completed loading!', 20, 60);
  
  let textDiv = createDiv('This is text written'
                + ' using the new font');
  textDiv.position(30, 80);
  textDiv.style('font-family', 'Montserrat');
}

Producción: 
 

Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ reference/#/p5/loadfont
Nota: No se puede acceder a esta función a través de un compilador en línea porque falta el archivo de fuente.