Safari not loading web fonts in web worker due to same-origin fetch mode

Question

Created Jan ’24

Replies 1

Boosts 0

Participants 1

I am developing an app that uses a Web Worker to render on a canvas, using transferControlToOffscreen(). I need to load web fonts into the canvas for rendering some text, but they are not loading in Safari (testing on Mac). I get the error :

Cannot load https://fonts.gstatic.com/s/zillaslab/v11/dFa5ZfeM_74wlPZtksIFYuUe6HOpW3pwfa0.woff2. Failed to load resource: Cross origin requests are not allowed when using same-origin fetch mode.

This works fine in Chrome and Firefox. The fonts return the "Access-Control-Allow-Origin" correctly, but in Safari the call isn't even made in order to check the access-control.

Is there a way to get Safari to make these requests and honor the access-control returned in the header for the font?

If not, is there a suggested work around in order to load web-fonts in a Worker context?

Boost

Answer 1

Mardell OP

Jan ’24

I was able to work around this by using the fetch api to load the font, and then create a FontFace from the arrayBuffer after I got a response. Maybe this will be helpful to others if you run into the same issue.

0