Fonts loaded by `loadFont()` cannot be used in CSS styles

p5.js version

1.9.0

What is your operating system?

Mac OS

Web browser and version

Chrome 120, Firefox 120, Safari 17.2

Actual Behavior

When I load a font with loadFont(), I can't use it to style HTML elements.

Expected Behavior

I should be able to set the font-family for HTML elements as shown in the last example.

Steps to reproduce

Here's a sketch that demonstrates the bug.

@raclim @lindapaiste @dhowe @paulaxisabel @SarveshLimaye @SkylerW99 @BamaCharanChhandogi @Obi-Engine10 @hannahvy @singshris @hiddenenigma I'm happy to help with this where I can!

let font;

// Load the font.
function preload() {
  font = loadFont("assets/PressStart2P-Regular.ttf");
}

function setup() {
  createCanvas(400, 400);

  // Paint the background.
  background(0);

  // Use the font in the canvas.
  fill(255);
  textAlign(CENTER);
  textFont(font, 22);
  text("Are you in?", width / 2, height / 2);

  // Create a <button> element.
  let button = createButton("Yes");
  button.size(100);
  button.position(width / 2 - 50, height / 2 + 30);
  
  // Style the button.
  button.style("background-color", "black");
  button.style("color", "white");
  button.style("border-radius", "10px");
  button.style("padding", "5px");

  // Try to set the button's font-family.

  // This works locally.
  button.style("font-family", "PressStart2P-Regular");

  // The code below makes the font-family work
  // in the p5.js Web Editor.
  
  // let f = new FontFace(
  //   "PressStart2P-Regular",
  //   "url(assets/PressStart2P-Regular.ttf)"
  // );
  // document.fonts.add(f);
}

Start with the linked reproducible sketch and compare loadFont() with the FontFace workaround shown in the issue. Trace how the p5.js Web Editor loads the font, then verify that a button styled with font-family can use it in Chrome, Firefox, and Safari. Done means the issue's expected HTML styling works without the workaround.