p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

[p5.js 2.0 Bug Report]: Font loading fails sometimes due to HTTP HEAD usage

Open davepagurek opened this issue 1 month ago • 2 comments

Most appropriate sub-area of p5.js?

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

p5.js version

2.x

Web browser and version

Chrome

Operating system

MacOS

Steps to reproduce this

Steps:

  1. Upload a font to Amazon S3 without public read access
  2. Generate a signed URL to access the file with
  3. Try to load it with p5 2.x

That sounds pretty specific and contrived haha. But it turns out S3 doesn't let you generate signed URLs that work both with HEAD and with GET, it's one verb per method. Our font loading does both on the same URL so it means these kinds of resources will not be able to be loaded.

We could catch a failed HEAD and use a GET instead though.

davepagurek avatar Nov 17 '25 21:11 davepagurek

Hi @davepagurek and TEAM, I see that font loading sometimes fails due to reliance on HTTP HEAD requests, especially with signed URLs (like those from S3) that don't support both HEAD and GET on the same resource. A good fix would be to catch failed HEAD requests and fallback to a GET request when loading fonts. I’d be happy to help implement and test this approach if the team agrees!

Ankit-raj-11 avatar Nov 18 '25 15:11 Ankit-raj-11

Hi @Ankit-raj-11, I've already got a PR open for this one!

davepagurek avatar Nov 18 '25 17:11 davepagurek