Shopify sıvısında @ font-face kullanırken font dosyası 404

Question

Burada ve Shopify forumlarında bulabildiğim tüm mesajlara baktım ve birkaç farklı şeyi denedim ama maalesef problemimi çözemedim. Shopify tema düzenleyici uygulaması ve Sublime metnini kullanarak Shopify mağazasında geliştiriyorum. Benim Shopify tema olarak

Ben özel bir yazı tipi yüklemek için, benim styles.css.liquid dosyası içinde @ font-face 'kullanıyorum:

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

Doğru dosyaları adlarıyla listelenen tüm yazı tipi dosyaları var ve Temanın "varlıklar" klasöründeki uzantılar. Hala styles.css.liquid gerekli yazı tipini, örneğin yük font-family kullanıyorum

:

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

Sorun sayfasını yüklediğinizde, yazı tipi yüklü olmayan olmasıdır . Ben Krom dev araçları sayfasını incelemek, bu yazı-files aradık ama bulunamadı, ediliyor bana gösteriyor mesela:

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

font-dosyaları yerel Sayfada küçük yük ve kadarıyla Öğe_url etiketlerimin doğru biçimlendirildiğini ve yazı tipi dosyalarının olması gereken yerde olduklarını söyleyebilirim, bu nedenle oluşturulan dosya yolu doğru olmalı, ancak görünmüyor. Bu konuda herhangi bir ışık tutabilirse, sonsuza dek minnettar olacağım! Şerefe!

Answer 1

İki gün boyunca gözyaşından sonra bunu duyduğumda, onu en sonunda düzelten şey, yazı tiplerinin dosya isimlerini değiştirerek ve tüm tire işaretlerini kaldırıyordu. Yani bundan @ font-face css değişiklikleri:

Buna

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

: Ben yazı dosyalarını bu değişim ve Shopify Temanın varlıklarda styles.scss.liquid dosyasını yapılan kez

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

klasör, yazı tipleri gerektiği gibi yükleniyor ve görünmeye başladı.

Varlık dosyası adlandırma kuralları hakkındaki Shopify belgelerinde herhangi bir yerde herhangi bir şey okumayı hatırlamıyorum, bu yüzden gelecekte bu birileri zamandan tasarruf ediyor!