File font 404 quando si utilizza @ font-face nel liquido Shopify

Question

Ho esaminato tutti i post che riesco a trovare qui e nei forum di Shopify e ho provato alcune cose diverse ma sfortunatamente non sono stato in grado di risolvere il mio problema. Sto sviluppando su un negozio di sviluppo di Shopify utilizzando l'app editor di temi Shopify e il testo Sublime.

Nel mio tema Shopify Sto usando @ font-face all'interno mio file styles.css.liquid, per caricare un carattere personalizzato:

@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; 
} 

Ho tutti i file dei font elencati, con nomi file corretti e estensioni, nella cartella 'assets' del tema.

Sto usando font-family per caricare il tipo di carattere, dove richiesto, ancora in styles.css.liquid, ad esempio:

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

Il problema è che quando si carica la pagina, il tipo di carattere non viene caricata . Quando ho ispezionare la pagina in strumenti di sviluppo Chrome, mi dimostra che il font-file vengono cercati ma non trovato, ad esempio:

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

Il font-files caricare bene su una pagina locale, e per quanto Posso dire, i miei tag asset_url sono formattati correttamente e i file dei font sono dove dovrebbero essere, quindi il percorso del file generato dovrebbe essere corretto, ma non sembra essere. Se qualcuno è in grado di far luce su questo, sarò eternamente grato! Saluti!

Answer 1

Dopo due giorni di lacrime che ho sentito su questo, la cosa che alla fine ha risolto stava cambiando i nomi dei file dei caratteri e rimuovendo tutti i trattini da essi. Così i @ font-face modifiche css di questo:

@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; 
} 

A tal:

@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; 
} 

Una volta ho fatto questi cambiamenti ai file dei font e il file styles.scss.liquid nel patrimonio del tema Shopify cartella, i caratteri hanno iniziato a caricarsi e apparire come dovrebbero.

Non ricordo di aver letto nulla nei documenti di Shopify sulle convenzioni di denominazione dei file degli asset, quindi spero che questo salvi qualcuno in futuro!