Phông chữ 404 khi sử dụng @ font-face trong Shopify liquid

Question

Tôi đã xem qua tất cả các bài đăng mà tôi có thể tìm thấy tại đây và trên diễn đàn Shopify và thử một vài điều khác nhau nhưng tiếc là không thể giải quyết được vấn đề của tôi. Tôi đang phát triển trên một cửa hàng Shopify dev bằng cách sử dụng ứng dụng biên tập chủ đề Shopify và văn bản tuyệt vời.

Trong chủ đề Shopify của tôi Tôi đang sử dụng @ font-face bên trong tập tin styles.css.liquid tôi, để tải một phông chữ tùy chỉnh:

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

Tôi có tất cả các tập tin phông chữ được liệt kê, với tên tập tin chính xác và mở rộng, trong thư mục 'asset' của chủ đề.

Tôi đang sử dụng font-family để tải font nơi yêu cầu, vẫn còn trong styles.css.liquid, ví dụ:

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

Vấn đề là khi tôi tải trang, phông chữ không được nạp . Khi tôi kiểm tra trang trong các công cụ dev Chrome, nó cho thấy tôi rằng font-file đang được tìm kiếm nhưng không tìm thấy, ví dụ:

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

Các font-file tải tốt trên một trang địa phương, và như xa như Tôi có thể nói, các thẻ asset_url của tôi được định dạng chính xác và các tệp phông chữ là nơi chúng nên ở, vì vậy đường dẫn tệp được tạo phải chính xác, nhưng dường như không. Nếu ai đó có thể làm sáng tỏ điều này, tôi sẽ mãi mãi biết ơn! Chúc mừng!

Answer 1

Sau 2 ngày xé toạc âm thanh của tôi, điều cuối cùng đã khắc phục được là thay đổi tên tệp phông chữ và xóa tất cả dấu gạch nối khỏi chúng. Vì vậy, những thay đổi css @ font-face từ này:

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

Để này:

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

Khi tôi thực hiện những thay đổi các tập tin phông chữ và các tập tin styles.scss.liquid tài sản với chủ đề Shopify của thư mục, các phông chữ bắt đầu tải và xuất hiện như chúng cần.

Tôi không nhớ đọc bất cứ điều gì ở bất kỳ đâu trong tài liệu Shopify về quy ước đặt tên tệp nội dung, vì vậy hy vọng điều này sẽ tiết kiệm thời gian cho một người nào đó trong tương lai!