Page Comparison

Using System fonts in processing p5.js is quite simple as seen in the examples below. This approach dynamically loads and displays the font, using vectors information, but be aware that this might not work for all fonts and appearance may vary from computer to computer. The advantages of this approach is that the fonts can easily be scaled without looking pixelated on the screen. 

...

. You can also load your own fonts and use them to type on the canvas

let myFont;
function preload() {
  myFont = loadFont('helvetica.otf'); //load your own font
}

function setup() {
  fill(0,0,255);
  textFont(myFont);
  textSize(36);
  text('p5*js', 10, 50);

Font can be saved within the sketch folder too, incase the font isn't installed on the computer running the sketch. 

Image Removed

PFont font;
size(200, 200);
background(0);
// the .ttf file should be saved in the sketch folder
font = createFont("Trebuchet-BoldItalic", 32);
textFont(font, 32);
text("word", 10, 50);
textSize(70);
text("word", 10, 100);

Alternatively fonts can be saved in the bitmap format that Processing uses. This will generally offer better performance and be more consistent across different computers, with the compromise that it can not be scaled up without looking pixelated. It is an option however, to save the font in multiple sizes. To create the .vlw file, open Processing and select the >Tools > Create Font> menu item.  

Image Removed

PFont font;
size(200, 200);
background(0);
// The vlw file should be saved in the sketch folder
font = loadFont("Trebuchet-BoldItalic-32.vlw");
textFont(font, 32);
text("word", 10, 50);
textSize(70);
text("word", 10, 100);}

In order to make interactive, kinetic typography, you need to use p5.Graphics. By calling createGraphics(w, h, [renderer]) you can draw into an off-screen graphics buffer. It allows you to overlay graphics on top of the canvas

The following example is based on https://timrodenbroeker.de/processing-tutorial-kinetic-typography-1/

...

// GRID
const g = 100; // cell width
const cellnum = 5; // numbers of cells per row and column

// BASIC
let cg; //canvas

// SOURCE
let sx;
let sy;
let sw;
let sh;

// DESTINATION
let dx;
let dy;
let dw;
let dh;
var wave;


function setup() {
  createCanvas(400, 400);
  cg = createGraphics(400, 400);
  cg.fill(0,0,0);
  cg.textFont("Hind");
}

function draw() {
  background(225);
  // grid();
  cg.push();
  cg.translate(width / 2, height / 2);
  cg.textSize(200);
  cg.textAlign(CENTER, CENTER);
  cg.text('p5.js', 0, 0);
  cg.pop();

  for (let x = 0; x < cellnum; x++) {
    for (let y = 0; y < cellnum; y++) {
       wave = int(cos((frameCount + ( x*y )) * 0.1) * 200);
      
      // SOURCE
      sx = x * g + wave;
      sy = int(y * g + (wave*0.2));
      sw = g;
      sh = g;

      // DESTINATION
      dx = x * g;
      dy = y * g;
      dw = g;
      dh = g;
      copy(cg, sx, sy, sw, sh, dx, dy, dw, dh);
    }
  }
grid();
}

function grid() {
  for (let i = 0; i < cellnum; i++) {
    for (let j = 0; j < cellnum; j++) {

      //show grid background
      cg.strokeWeight(random(1,3));
      cg.stroke(0);
      cg.noFill();
      cg.rect(i * g, j * g, g, g);

    }
  }
}

Another method to manipulate the font is to use textToPoints(txt, x, y, fontSize, [options])method, which allows us to create a vertex array on the path which define a specific string.