Tipo de letra ficheiro 404 ao usar o @font-face no Shopify liquid

Question

Tipo de letra ficheiro 404 ao usar o @font-face no Shopify liquid

eu olhei através de todos os posts que eu posso encontrar aqui e em fóruns de Shopify e tentei algumas coisas diferentes, mas infelizmente não foram capazes de resolver o meu problema. Shopify dev store está em desenvolvimento usando o aplicativo editor de tema Shopify e texto Sublime.

no meu tema de Shopify estou a usar o @font-face dentro dos meus estilos.Forum.ficheiro líquido, para carregar um tipo de letra personalizado:

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

tenho todos os ficheiros de tipos de letra listados, com nomes e extensões correctos dos ficheiros, nos 'activos'do tema pasta.

estou a usar a família da fonte para carregar a fonte onde for necessário, ainda em estilos.Forum.líquido, p. ex.:

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

o problema é que quando carrego a página, a fonte não está a ser carregada. Quando inspeciono a página em Ferramentas do Dev Chrome, ela me mostra que os arquivos de fontes estão sendo procurados, mas não encontrados, por exemplo:

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

os ficheiros de tipos de letra carregam bem numa página local, e tanto quanto sei, as minhas marcas asset_url estão formatadas correctamente e os ficheiros de tipos de letra estão onde devem estar, por isso, o o caminho de arquivo gerado deve estar correto, mas não parece estar. Se alguém puder esclarecer isto, ficarei eternamente grato! Saúde!

8

css font-face shopify liquid

Author: SilentDesigns, 2015-07-27

Source

1 answers

score 6 · Accepted Answer

Depois de 2 dias a rasgar a minha audição por causa disto, a coisa que finalmente a consertou foi mudar os nomes dos ficheiros das fontes e remover todos os hifens deles. Então o CSS @font-face muda disto:

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

Para isto:

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

Uma vez que eu fiz esta mudança para os arquivos da fonte e os estilos.scss.o ficheiro líquido na pasta de activos do tema Shopify, os tipos de letra começaram a carregar e a aparecer como deveriam.

Não me lembro de ter lido nada em qualquer lugar dos documentos do Shopify sobre Convenções de nomes de arquivos de ativos, então espero que isso salve alguém algum tempo no futuro!