Font file 404 when using @font-face in Shopify liquid

Question

I've looked through all the posts I can find here and on Shopify forums and tried a few different things but unfortunately haven't been able to solve my problem. I am developing on a Shopify dev store using the Shopify theme editor app and Sublime text.

In my Shopify theme I am using @font-face inside my styles.css.liquid file, to load a custom font:

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

I have all the listed font files, with correct files names and extensions, in the theme's 'assets' folder.

I am using font-family to load the font where required, still in styles.css.liquid, e.g:

.some-element {
    font-family: 'gotham-book', Helvetica, Arial, sans-serif;
}

The problem is that when I load the page, the font is not being loaded. When I inspect the page in Chrome dev tools, it shows me that the font-files are being looked for but not found, e.g.:

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

The font-files load fine on a local page, and as far as I can tell, my asset_url tags are formatted correctly and the font files are where they should be, so the file path generated should be correct, but doesn't seem to be. If anyone is able to shed any light on this, I'll be eternally grateful! Cheers!

Answer 1

After 2 days of tearing my hear out over this, the thing that finally fixed it was changing the filenames of the fonts and removing all hyphens from them. So the @font-face css changes from this:

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

To this:

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

Once I made these change to the font files and the styles.scss.liquid file in the Shopify theme's assets folder, the fonts started loading and appearing as they should.

I don't recall reading anything anywhere in Shopify docs about asset file naming conventions, so hopefully this saves someone some time in the future!