CODEWITHSUNDEEP
javascriptfontsp5.js
Nicholas Siebenaller
Nicholas Siebenaller

Reputation: 97

Loading a font from a file to use in a P5.JS dom element

I'm currently having trouble using custom fonts within p5.js dom. I can load the font into a var but have no idea how to style a specific element with that var.

This is what I've tried...

var robotoReg = loadFont("Roboto-Regular.ttf");
document.getElementById("mStockOne").style.fontFamily = "robotoReg";

Any help would be appreciated.

Upvotes: 2

Views: 1147

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42174

Your question is answered in the P5.js reference:

You can also use the string name of the font to style other HTML elements.

var myFont;

function preload() {
  myFont = loadFont('assets/Avenir.otf');
}

function setup() {
  var myDiv = createDiv('hello there');
  myDiv.style('font-family', 'Avenir');
}

The problem is that you're using the name of the variable to set the DOM element's font, which won't work. You need to use the name of the actual font.

var robotoReg = loadFont("Roboto-Regular.ttf");
document.getElementById("mStockOne").style.fontFamily = "Roboto";

Upvotes: 0

Related Questions