Problemas no Font-Faces.css

Olá a todos!

Estou com alguns problemas ao tentar instalar fontes customizadas na minha storefront. Segui a documentação da VTEX (Customizing your store’s typography) para a loja que estou atendendo, parece que o arquivo “font-faces.css” nem está sendo carregado, pois tentei até mesmo usar uma fonte hospedada em outro local, mas não obtive sucesso.

Alguém já passou por isso ou tem alguma sugestão sobre como posso resolver esse problema. ?

Já tentou configurar isso em algum arquivo css dentro da pasta css?

exemplo: vtex.store-header.css?

ou fazer um importe desse arquivo?

exemplo:

@import(…/configs/font-face.css)

acredito que para arquivos fora da pasta css precise fazer isso

Opa! obrigado pela resposta. Mesmo com @import no vtex.store-header.css ainda não carrega minhas fontes. Acredito que meu problema é outro…

Fiz novos testes hoje e ao invés de apontar para uma fonte na pasta assets do tema, apontei para uma url de uma fonte hospedada em outro lugar, dessa vez obtive sucesso, por conta disso acredito que o arquivo font-faces.css esteja funcionando corretamente e por conta disso acredito que esteja fazendo algo errado com o asset-builder, além de colocar o assets na lista de builders do manifest, preciso fazer alguma coisa para que funcione corretamente ? os arquivos dessa pasta funcionam se um app não foi publicado em uma workspace de desenvolvimento ?

@iHenrique funcionam sim, não é necessário estar em Production TRUE. A estrutura correta seria esta, e importante importar as fontes no /assets.

No font face css, vc poderia tbm trazer via SRC url, ex

@font-face {
font-family:“NAME”;
src:url(“https://use.typekit.net… URL COMPLETA”);
font-display:auto;font-style:normal;font-weight:400;
}

Dica: No checkout6-custom.css aproveite e tbm importe-a para manter a tipogradia dentro do projeto completo. O checkout não herda as fontes do assets/

Abs

1 Like