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. 

PFont font;
 
size(200, 200);
String[] fontList = PFont.list();
printArray(fontList); // print out a list of all system fonts available. 

font = createFont("comic-sans", 32);
textFont(font);
text("I (heart) Helvetica", 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

...

. 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);
textSize(70);
text("word", 10, 100);}