Font files not found when using @font-face and asset_url

Si_White
Shopify Partner
6 0 8

Hi all. I've looked through all the posts I can find here and on stackoverflow 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!

Replies 14 (14)
Jason
Shopify Expert
10438 167 2081

I am seeing the font load without issue. Was there a certain browser in which it wasn't working?

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Si_White
Shopify Partner
6 0 8

Hi Jason, thanks for your reply. That's interesting, I am not seeing the fonts load in both Chrome and Safari - haven't been able to test FF or IE at this point. Could you let me know which browser you're seeing the fonts load in, and at what URL? Thanks in advance.

Jason
Shopify Expert
10438 167 2081

Chrome via http://kiwioptical.co.nz

Note the fonts loaded successfully:

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Si_White
Shopify Partner
6 0 8

Hi thanks for that Jason, I am actually having the problem at a new dev store - mrfoureyes.myshopify.com, using the same fonts that are working on kiwioptical.co.nz - I tried comparing the two and still can't get it working, which is even more confusing! 

Jason
Shopify Expert
10438 167 2081

I could take a peek that dev store if you wanted to post the storefront (not admin!) password.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Si_White
Shopify Partner
6 0 8

Thanks Jason, I appreciate that. I have temporarily removed the password, cheers!

Si_White
Shopify Partner
6 0 8

After 2 days of tearing my hear out over this, the thing that finally fixed is 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!

Cormick_Browne
Tourist
9 0 3

@Si White you are the absolute best! I was starting to lose it and your solution saved me. Definitely something funky going on if you include nonalphanumerics in the font file name.

Adrian_Harwood
Shopify Partner
1 0 0

Oh my god, Si White thank you so much for posting your solution. I've been stressing about this issue for days. You'd think Shopify could add a simple line on their webfont implementation tutorial page about it!