Uso di un font esterno

Per essere sicuri che il font visualizzato sia quello corretto è necessario far caricare il relativo file TTF o OTF (con loadFont()) e impostarlo come font nello sketch (con textFont()).

    let font;

async function setup() {
    font = await loadFont( "vanessa.ttf" );  // carica il font
    background( 220 );
    textFont( font, 30 );  // imposta font e dimensione
    text( "Testo", 3, 50 );
}
  

La parola async prima di setup() permette di usare al suo interno await, che sospende l’esecuzione fino al caricamento del file: le istruzioni successive possono quindi usare il font.

La variabile font permette di mantenere in memoria il font che potrà quindi essere usato anche nel resto del codice.

Provare a far visualizzare un’unica lettera grande al centro del canvas.

Strutturazione dei file:

• CARTELLA-SKETCH
  • index.html
  • sketch.js
  • style.css
  • vanessa.ttf

Con p5.js 1 i font si caricano nella funzione preload(), che p5.js 2 non usa più:

  function preload() {
    font = loadFont("vanessa.ttf");
}