Error catching in JavaScript does not catch error properly

Question

I am working on a game in javascript which utilizes the p5.js library. I am trying to load my own font, in which I am using a .ttf file, but sometimes, p5.js doesn't properly load the font. in cases like this, I am trying to use the try and catch method to check if this happens, and if it does, to switch my font to a default built-in font that always works (not a .ttf, just built-in). Here is my code pertaining to the issue:

function preload() {

  try {

    font = loadFont("assets/BebasNeue-Regular.ttf"); // Font from Google Fonts - https://fonts.google.com/specimen/Bebas+Neue#standard-styles

  } catch (error) {

    console.error("ERROR: " + error)
    console.log("Font was unable to load, using default font.");
    font = "Helvetica";

  }

  console.log("Assets preloaded...");

}

However, whenever I try to run my code, not only does my canvas not load anything, but the error still appears in the console. My console.log statement, however, is not there. Here is what it says:

Not allowed to load local resource: blob:null/a07d873c-2d5e-4653-92f4-02fd085cc6e4
p5.js:48337 
🌸 p5.js says: It looks like there was a problem loading your font. Try checking if the file path (assets/BebasNeue-Regular.ttf) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)
p5.js:80410 Font could not be loaded assets/BebasNeue-Regular.ttf
(anonymous) @ p5.js:80410
assets/BebasNeue-Regular.ttf:1 Failed to load resource: net::ERR_FAILED

Even though my asset is in my folder, when I try to run the program, it does not work. Does anyone know how to fix/change my error-catching statement?

EDIT: I tried a different way of error catching, which is provided by p5 in the loadFont() procedure. Here is what my new code is:

function preload() {

  font = loadFont("assets/BebasNeue-Regular.ttf", setup, fontError); // Font from Google Fonts - https://fonts.google.com/specimen/Bebas+Neue#standard-styles

  console.log("Assets preloaded...");

}

function fontError() { console.log("Font was unable to load, using default font."); font = "Helvetica"; }

function setup() {

  // Sets up the game, irrelevant to error.
  
}

Here is a link to my code download is it helps: https://www.mediafire.com/file/k4nm445dkxhv0i8/game.zip/file

Answer 1

As the documentation states:

Outside of preload(), you may supply a callback function to handle the object:

You should refactor your code like this:

let font;

function preload() {
  loadFont("assets/BebasNeue-Regular.ttf", result => {
    console.log("Assets preloaded...");
    font = result;
  }, error => {
    console.error("ERROR: " + error)
    console.log("Font was unable to load, using default font.");
    font = "Helvetica";
  });
}

function setup() {
  // use the font
}