Custom font files returning 404 error with @font-face in Shopify theme

Other Questions Shopify
1

I’m working on a Shopify development store and having trouble loading custom fonts. I’ve checked multiple forums but can’t seem to fix this issue.

I’m trying to implement a custom font using @font-face in my main.css.liquid file:

@font-face {
    font-family: 'proxima-regular';
    src: url(' {{ 'proxima-regular-webfont.eot' | asset_url }} ');
    src: url(' {{ 'proxima-regular-webfont.eot?#iefix' | asset_url }} ') format('embedded-opentype'),
    url(' {{ 'proxima-regular-webfont.woff2' | asset_url }} ') format('woff2'),
    url(' {{ 'proxima-regular-webfont.woff' | asset_url }} ') format('woff'),
    url(' {{ 'proxima-regular-webfont.ttf' | asset_url }} ') format('truetype'),
    url(' {{ 'proxima-regular-webfont.svg#proximaregular' | asset_url }} ') format('svg');
    font-weight: normal;
    font-style: normal;
}

All font files are properly placed in the assets directory with matching names. I’m applying the font like this:

.header-text {
    font-family: 'proxima-regular', Georgia, serif;
}

However, Chrome developer tools shows 404 errors when trying to fetch the fonts:

GET http://cdn.shopify.com/s/files/1/0924/9286/t/3/assets/proxima-regular-webfont.woff?13846384044068149085 404 (Not Found)

The fonts work perfectly on my local environment. The asset_url syntax appears correct and files are in the right location. What could be causing Shopify to not find these font files?

2

Had the same problem when customizing a Shopify theme. Usually it’s how the font files get uploaded to Shopify. Make sure your fonts are properly uploaded to the assets folder in the theme editor. Go to Online Store > Themes > Actions > Edit code to check them directly in Shopify admin. Upload each font file one by one instead of doing batch uploads - batch uploads mess up the syncing sometimes. Also check that your font files aren’t over 20MB because Shopify won’t tell you if they fail to upload. Clear your browser cache after making changes before you test anything.