Font personalizzati: aggiungerli e utilizzarli

In Processing è possibile utilizzare le font che abbiamo installato sul nostro computer all'interno dei nostri sketch. In questo post vedremo come aggiungerli al nostro programma e come utilizzarli in modo efficace. Questi argomenti saranno sicuramente utili a chi ha un background di tipo grafico e utilizza regolarmente Photoshop o Illustrator.

Font vettoriali

La prima funzione che dobbiamo usare per aggiungere le font è createFont(), necessaria per convertire un file in formato TrueType (.ttf) oppure Open Type (.otf) in modo tale da poter essere utilizzato con la funzione text() di cui abbiamo parlato.

Per vedere tutte le font installate compatibili, come indicato anche nell'esempio nel reference, basta scrivere le seguenti righe di codice:

String[] fontList = PFont.list(); printArray(fontList);

Queste due righe non fanno altro che generare e mostrare in console un'array di stringhe con tutti i nomi delle font attualmente installate sul computer:

[0] "Serif" [1] "SansSerif" [2] "Monospaced" [3] "Dialog" [4] "DialogInput" ... [862] "Verdana" [863] "Verdana-Bold" [864] "Verdana-BoldItalic" [865] "Verdana-Italic"

Ora che sappiamo quali font è possibile usare, dobbiamo convertirle. È necessario utilizzare un data type specifico per salvare tutte le informazioni relative ai caratteri: PFont.

Creiamo una variabile di tipo PFont e usiamo la funzione createFont() per convertire il formato utilizzando due parametri: il primo è il nome della font, il secondo la grandezza di base.

Con la funzione textFont() diciamo al programma quale font usare.

// Rimuovi il commento per vedere l'elenco delle font installate.
// String[] fontList = PFont.list();
// printArray(fontList);

PFont gill;

void setup() {
  size(500, 200);
  gill = createFont("GillSans", 28);
  textFont(gill);
  fill(0);
  text("Questo è un testo in GillSans", 10, height/2);
}

void draw() {
}

Questo il risultato:

Nel caso volessimo usare più font all'interno del nostro programma, è sufficiente ripetere il processo con tutte i caratteri che vogliamo:

// Rimuovi il commento per vedere l'elenco delle font installate.
// String[] fontList = PFont.list();
// printArray(fontList);

PFont gill, openSans;

void setup() {
  size(500, 200);
  gill = createFont("GillSans", 28);
  openSans = createFont("OpenSans", 28);
  textFont(gill);
  fill(0);
  text("Questo è un testo in GillSans", 10, height/2);
  textFont(openSans);
  text("Questo è un testo in OpenSans", 10, height/2 + 40);
}

void draw() {
}