[p5.js 2.0 Bug Report]: textToContours font loading error

[zekewattles]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.3

Web browser and version

Chrome 138.0.7204.49 (Official Build) (arm64)

Operating system

MacOS

Steps to reproduce this

On occasion, loading a font and using textToContours produces the following error message when I click "play":

Error: No font data available for "f7a07e45-b775-4899-8ca2-552c06c273b5"
You may have encountered a CORS error 

🌸 p5.js says: It looks like there was a problem loading your file. Try checking if the file path (https://assets.editor.p5js.org/5cf41a40044a33001e3eb90c/f7a07e45-b775-4899-8ca2-552c06c273b5.otf?v=1753048300953) is correct, hosting the file online, or running a local server.

+ More info: https://github.com/processing/p5.js/wiki/Local-server 
WARN: No glyph data for 'f7a07e45-b775-4899-8ca2-552c06c273b5', retrying as FontFace 

🌸 p5.js says: [sketch.js, line 22] An error with message "No font data available for "f7a07e45-b775-4899-8ca2-552c06c273b5"
Try downloading a local copy of the font file" occurred inside the p5js library when textToPaths was called. If not stated otherwise, it might be an issue with the arguments passed to textToPaths. (https://p5js.org/reference/p5/textToPaths)

Usually, stopping then replaying the sketch, or reloading the page will fix the issue. But about 10%-20% of the time when clicking "play", this occurs. Could this be an issue with await loadFont?

Tried it with multiple font files and the issue persists.

This is my code: https://editor.p5js.org/zekewattles/sketches/ASfMLKeel

[perminder-17]

Hi @zekewattles, thanks for raising this. I was trying to dig into this behavior more but it turned out to be a weird bug:

1. I can’t reproduce it locally.

2. If I load a font directly from the internet (font = await loadFont('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/fonts/roboto/Roboto-Regular.ttf');

What I feel is:
Instead of uploading it as an asset in the p5.js Web Editor, the error doesn’t occur. I think, Locally you’re serving your HTML, JS, and font from the same server, so the browser freely shares raw font bytes with p5.js, but in the Web Editor our .otf or font file lives on assets.editor.p5js.org, which doesn’t consistently allow that low‑level access.

I am not sure about it so, tagging @limzykenneth and @dhowe for their review on this behaviour if you have any ideas what's actually happening here?

[perminder-17]

I think probably this needs to be fixed? processing/p5.js-web-editor#3156

[limzykenneth]

I'm not able to replicate this myself and from the above it seems to be relatively transient and limited to the web editor. To potentially help identify the problem and isolate it, it may be helpful if you can try to trigger the issue again and once it happens try to grab the HTTP response of the request to the asset in the browser console, to see if the request itself succeeded and what it returns.

[zekewattles]

Hey @perminder-17 and @limzykenneth , thanks for taking a look. Yes, this appears to be limited to loading uploaded font files in the web editor. Strangely, when it is working, I don't see this .OTF showing up at all in the Network tab... Again, it's not consistent—if I play the sketch repeatedly a few times, it might work 4 out of 5 times before showing this error.

[perminder-17]

Thanks @zekewattles for looking at it.

Also tagging @raclim if you have any suggestions for it?

Is this behavior related to this bug : processing/p5.js-web-editor#3156