How to use asset fonts in p5

Error: Unsupported OpenType signature

p5.js says: It looks like there was a problem loading your font. Try checking if the file path [assets/Bold.ttf] is correct, hosting the font online, or running a local server.[]

–I"m literally copying from the p5.js examples into a clean editor and it’s not working
how do I add the font assets to the editor?
no examples exist

you can make a subdir ‘assets’
and upload font files, also there are other way…

in console print find LINKS ( can click )
to more examples…

also it looks like you play / regular / bold / …
if you not use font files for this please know about
( that is not available in JAVA )

But the examples show native asset fonts. There has to be native fonts that dont require uploads. Just includes or css files right??
The examples show none of this to me clearly

again, if you talk font files there is a example
where you also find the subdir ‘assest’ and file as i explained

( and your code talk about that exact situation, just that the subdir and files are missing! )

if you talk about system fonts:
like in the first part of this reference
using fonts that should be available to your browser on your computer, ,

play again my revised example
so no need to provide / (down / pre) load / font files.
as for second part of that reference topic


So i have to load a font?

Therr is no default font pre-loaded??

not understand your question,
as for me i just show you the opposite
using the system fonts not requires preloading files,

but if preloading files they must exist,
and you must run in a server environment.

yes, I just want to use the system fonts.

I tried an example and it gave an error message that it could’nt find the asset\FontName…

I forget the exact error…—

I found it—cut and paste this into a new editor


p5.js says: It looks like there was a problem loading your font. Try checking if the file path [assets/inconsolata.otf] is correct, hosting the font online, or running a local server.[]

============= example code=======

let inconsolata;
function preload() {
inconsolata = loadFont(‘assets/inconsolata.otf’);
function setup() {
createCanvas(100, 100, WEBGL);
textSize(width / 3);
textAlign(CENTER, CENTER);
function draw() {
let time = millis();
rotateX(time / 1000);
rotateZ(time / 1234);
text(‘p5.js’, 0, 0);

1 Like

Hi there Greg,

If you don’t want to use a specific font, you don’t have to call textFont (I’m not certain whether this picks the viewers default system font or that P5 has its own font included):

function setup() {
  text('Font Style Normal', 10, 30);
  text('Font Style Italic', 10, 50);
  text('Font Style Bold', 10, 70);

In case you want to use your own fonts for the P5 Web Editor, you need to make sure that the fonts called in function preload are at the right location as kll mentioned.

You can add a font by clicking on the button called Sketch in the top of the Web Editor, followed by Add file. Pick the font you’d like to use and upload it to your sketch.
To check whether it’s uploaded in the right location, so it matches the path in function preload, is by clicking on the grey little arrow under the red play button. It extends a menu which shows all the files that are part of your current sketch.

Does that answer your questions?

no idea if that file exists in your project,
but on the internet it does NOT.

i could find and download … and upload to /assets

and it works now

but as it is a google font please remember that i linked you already to my example about that
but that way it seems not to work in WEBGL and use ROTATE…