slate
slate copied to clipboard
Shopify
Problem using the new font filters and browsersync
Not long ago, Shopify introduced a new font picker for the theme editor giving merchants a new library of fonts to choose from.
Problem
To prevent hot-linking, the code is whitelisting Shopify-controlled domains. Since we are using browsersync to develop and test on external devices, the fonts from the font picker are blocked on both localhost:XXXX and the external IP address resolving in an net::ERR_ABORTED 406 (Invalid 'hmac' query string parameter) error message.
Replication steps
- Create a new Theme based on Starter Theme
- Run yarn start
- Preview the site using
localhost:XXXX - Check the console for errors
More Information
The Shopify core team is looking into solutions. Will update this issues based on their findings and possible solutions.
Will this be fixed anytime in the near future? Or should we move away from the new font picker?
Will this be fixed anytime in the near future? Or should we move away from the new font picker?
Good day! I'm wondering about the same thing as well. It seems that this does not only happen in Slate. I tried the free Brooklyn Theme earlier on a sandbox store, and it's the same case. It seems that the URL generated both for the "font_face" and "font_url" filters are throwing an "Error 406 Invalid 'hmac' query string parameter" warning (i.e., https://fonts.shopifycdn.com/arapey/arapey_n4.2d2866546ce54f39e3baf69f5d944e54b2e0771b.woff2?&hmac=5e984782c9a5779b38a9252cabb94652343a66369566d28d02efa67be50007e1).
Hey! I'm seeing this issue as well - Safari desktop and all browsers on iOS devices are getting a 406 error when requesting the font, but all browsers on Android and non-Safari browsers on mac + windows desktop work fine.
Is any more information about this available? The workaround won't work in our case since we're dealing with live customer requests. Thanks so much!
