Font selected in Font Picker not displaying on Safari

Shopify Expert
3 0 1

When I select the font DIN Next from the Shopify Font Picker, it doesn't display on Safari (it looks fine on Chrome).

If I check out the Network tab on the inspector, I see that the .woff file was not found--I get the following error:

"Error 401 Missing or malformed 'Referer' header"

The Chrome browser doesn't even look for this file. But if I plug in the URL above, it also shows the error.

The .woff2 file, however, seems to work fine on Chrome, but gives the same error as above on Safari:

Any insights into this? We need to be able to use the Font Picker to display fonts on Safari as well as Chrome.


At Bahia Designs, we create beautiful and usable digital experiences for innovative brands. Shopify Partners since 2013.
Replies 2 (2)

1 0 1

We're having this problem too. Not sure if it has anything to do with the theme preview feature, which we are using during development. Regardless, I don't have time to faff around with it and switched to hard-coding the Google Fonts links. Unfortunate for our client, but I don't see a simpler fix right now.

Shopify Expert
28 2 22

I am Chrome user so I don't aware this issue until my client shared that my shared theme preview link unable to see the font when they use Safari.

It seems to me it is issue on Safari when checking out the theme-preview link. It does not have issue when we preview the theme with this pathway Admin Panel > Online Store > Themes > Preview. I suspect it is the theme preview domain doesn't offer sufficient request header information causing the CDN reject to serve the content.

Look forward Shopify would tackle this otherwise the theme-preview feature will cause unnecessary problem from clients' review.
I am a Freelance Web Engineer. Dedicated my life to e-commerce development.