loadFont is not working

[baisampayans]

Hi All,

I am using react-p5-wrapper npm module to use p5 sketches inside my react based portfolio site.

While it works pretty fine, I got stuck in loadFonts.

As per the example and documentation, in preload function loadFonts(‘your_font_name.ttf/otf’) should work. But it is always giving me errors. It is saying problem loading the font and unsupported OpenType signature.

I tried to console.log the font inside the preload function and since it is not loading, it is coming as undefined.

Attaching the screenshot of the error.

Any help to resolve this issue would be highly appreciated.

Best,
Baisam

[baisampayans]

Attaching the code screenshot also.

[kll]

it might be a path problem,
where is that file?

usually i do like

var fontfile = “data/knewave.otf”;

…loadFont(fontfile);

[baisampayans]

the file is in the same folder as the sketch

[kll]

and did you try

var fontfile = "knewave.otf";

instead “./” already?

[baisampayans]

yes i tried and i guess you can have it both ways.

[kll]

here https://editor.p5js.org/kll/sketches/5eAJTcNGR it works.

[baisampayans]

It works in the editor but not when I am using VSCode as the editor.

One hack that I figured out is that, if the font file is in the public folder of react project, it works fine, which is strange.

[janglee]

@baisampayans

One hack that I figured out is that, if the font file is in the public folder of react project, it works fine, which is strange.

If you created your project with react-create-app then you should have to put your assets in public/ directory. Read wiki

[JustSimple]

Having the same problem, except instead of <!DO its {me, using chrome OS