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.
27

Hey! I’m not sure if this would help but I always remove the “?=v000000000” bit from my urls for fonts/images/etc and everything works fine, so in your case I would be using this:

@font-face {
    font-family: 'colors';
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot');
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff2') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff') format('woff'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.ttf') format('truetype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.svg#colors') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Other than that I don’t see any difference between your CSS and the CSS I usually use, it all looks good.

Let us know if that little tweak helped.