Unfortunately, there is a message saying “Failed to decode downloaded font:…”
I have tried three different file sources for the font and I get the same error message.
Topic summary
Custom webfonts fail to render (e.g., “Failed to decode downloaded font”) even with correct @font-face CSS in Shopify themes.
Early attempts: minor syntax fixes (removing extra quotes around Liquid asset_url) and full @font-face blocks for Urbanist (including Google-hosted sources) did not resolve the error.
Likely root cause: Shopify’s online code editor sometimes uploads font binaries as text (ASCII), corrupting files. Effective workarounds reported by many:
- Upload fonts outside the code editor: via Themekit or Settings > Files.
- Reference the uploaded files using their CDN URLs in CSS (or use the Liquid filter | file_url), instead of theme Assets/asset_url.
Troubleshooting tips for edge cases (e.g., desktop Chrome):
- Remove cache-busting query strings (?v=…) from font URLs.
- Use protocol-relative URLs (//cdn.shopify.com) to avoid potential CORS (cross-origin resource sharing) issues.
Outcome: Numerous confirmations that uploading via Files/Themekit and referencing CDN or file_url fixes the issue. One user still struggled; suggestions included removing ?v= and using protocol-relative URLs.
Status: No confirmed platform fix; reports indicate the problem persists years later. Thread remains open with ongoing assistance offered.