How to load an external font in p5js?

Question

I tried changing the font in P5.js to a Minecraft font, like in the reference with loadFont(). The font file 'MinecraftRegular-Bmg3.otf' is in the same folder as Index.html and sketch.js.

My code:

let minecraft;
function preload() {
minecraft = loadFont('MinecraftRegular-Bmg3.otf');
}

function setup() {
createCanvas(windowWidth, windowHeight);
}

function draw() {
background(44, 47, 51);
text("Test", 50, 50);
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}

Now the problem, when I'm trying to load Index.html, it's just showing "Loading..." and in the console it's printing out three error messages:

Access to XMLHttpRequest at 'file:///C:/Users/User/Desktop/p5jsProjects/test/MinecraftRegular-Bmg3.otf' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Font could not be loaded ./MinecraftRegular-Bmg3.otf

GET file:///C:/Users/User/Desktop/p5jsProjects/test/MinecraftRegular Bmg3.otf net::ERR_FAILED

Does anyone have an idea how to fix this, or how I can load a font differently?

Edit: I don't want to make my own web server or something, because the code is on my own pc. And I think I will have to start the web server when ever I start my pc, to just visit my website.

Also, I tried uploading the font file to google drive and then using the download link in 'loadFont()'. Then the console is saying, that:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

How to load an external font in p5js?

0 Answers0