How to use asset fonts in p5

p5.js Web Editor

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.[Local server · processing/p5.js Wiki · GitHub]

–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…


https://editor.p5js.org/kll/sketches/H1RjsrxZ4

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
https://p5js.org/reference/#/p5/textStyle
( 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
https://editor.p5js.org/p5/sketches/Typography:_Words
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
https://p5js.org/reference/#/p5/textFont
using fonts that should be available to your browser on your computer,
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts ,

play again my revised example https://editor.p5js.org/kll/sketches/E7oh0oCjq
so no need to provide / (down / pre) load / font files.
as for second part of that reference topic

Thanks.

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.

hi,
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

=================error

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.[https://github.com/processing/p5.js/wiki/Local-server]

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

let inconsolata;
function preload() {
inconsolata = loadFont(‘assets/inconsolata.otf’);
}
function setup() {
createCanvas(100, 100, WEBGL);
textFont(inconsolata);
textSize(width / 3);
textAlign(CENTER, CENTER);
}
function draw() {
background(0);
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() {
  background(210);
  fill(0)
  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…