Why isn't my @font-face displaying correctly?

Store Design

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.

Summarized with AI on December 15. AI used: gpt-5.
2

Hi @LeviEiko ,

Can you try this code instead? I remove the quotations outside the liquid code.

@font-face {
font-family: "Urbanist";
src: url({{"Urbanist-Regular.woff2" | asset_url }}) format("woff2"),
url({{"Urbanist-Regular.ttf" | asset_url }}) format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}