@raclim The main issue of the loadfont() function is that :

1. The Web Editor replaces the file name with a UUID (e.g., 6b2bb864-90a5-4af7-be93-e0e4b3578674.ttf).And thus the @font-face rule generated by loadFont() uses the UUID as the font-family name, making it impossible to reference the font in CSS.

2. TO correct this we will have to update the loadfont() function in the p5.js core repository. I am unable to sync both of the repo due to some technical issues.

So , the changes which we will have to do are in the https://github.com/processing/p5.js/blob/main/src/typography/loading_displaying.js and we will have to update the loadfont() function present on the 129th line . The updated code is as follows :

`p5.prototype.loadFont = function (path, onSuccess, onError) {
p5._validateParameters("loadFont", arguments);
const p5Font = new p5.Font(this);

const self = this;
opentype.load(path, (err, font) => {
if (err) {
p5._friendlyFileLoadError(4, path);
if (typeof onError !== "undefined") {
return onError(err);
}
console.error(err, path);
return;
}

p5Font.font = font;

if (typeof onSuccess !== "undefined") {
  onSuccess(p5Font);
}

self._decrementPreload();

// Extract the font name from the file path
const fileNoPath = path.split("\\").pop().split("/").pop();
const fontName = fileNoPath.replace(/\.[^/.]+$/, ""); // Remove the file extension

// Add the font to the document with the correct font-family
const newStyle = document.createElement("style");
newStyle.appendChild(
  document.createTextNode(
    `\n@font-face {\nfont-family: "${fontName}";\nsrc: url("${path}");\n}\n`
  )
);
document.head.appendChild(newStyle);

});

return p5Font;
};
`

Conclusion : - The @font-face rule now uses the actual font name (e.g., PressStart2P-Regular) instead of a UUID.