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!

Are their any errors in your browser console? I've run into cross-origin issues with fonts that have shown up there. — Maximillian Laumeister, Jul 27 '15 at 03:58
Are you developing your store on shopify.com? Or you downloaded the files and set them up on your server? — BahaEddine Ayadi, Jul 27 '15 at 04:34
@MaximillianLaumeister - The only other errors in the console are 3 'Uncaught (in promise) 404' errors which seem to refer to the doctype tag, not sure if that would be related? — SilentDesigns, Jul 27 '15 at 05:00
@ayadibaha I'm developing on a dev store on Shopify via my partner account. The Shopify theme editor allows me to edit files locally and uploads them on-save back to Shopify. — SilentDesigns, Jul 27 '15 at 05:00

SilentDesigns · Accepted Answer · 2015-07-29T04:44:29.907

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!

Thanks for answering your own question. Saved me a lot of time. For me, I had hyphens and capitals in my font names and both were causing the issue. I would also like to add that I was having extra difficulty with this as shopify can't rename things from caps to nocaps (renaming from ABCdef.ttf to abcdef.ttf), and the mac 'shopify theme' app doesn't give you any feedback that the rename wasn't succesful. Just in case anybody else stumbles on this. Thanks again SilentDesigns — Hamish Johnson, Nov 27 '15 at 00:35
Wow... I spent hours troubleshooting this. I thought it was how I was calling it within my react app, come to find out it's the stupid dashes in the name... Thank you for answering this, you saved my bacon. — Jared Eddy, Aug 26 '19 at 19:59
Aha, thank you! I also was missing the quotes around the "font-name.woff2". — 00-BBB, Nov 26 '20 at 15:54
wow you deserve a medal.. Spent way too much time on this - Works like a charm now used capitalized naming which also did not work - Thank you — Blue Bot, Dec 01 '20 at 12:45

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

1 Answers1