Fonte utlizada na Loja

Boa tarde, na e-com club uso uma fonte a Poppins para isso alterei no css e coloquei um código em inserir código, na e-com plus coloquei apenas no css, preciso colocar o código também? Se sim onde?

E-com club: mais alterações de css

E-com plus: body { font-family: Poppins;}

Boa tarde Kelvys, tudo bem?
Acesse por favor sua loja no Github, depois na pasta Templates > Pages > @custom-html > head.ejs.
Depois cole o html que o Google fonts passa e cole nesse arquivo. Ao colar, clique no botao verde para enviar a informação inserida.

1 curtida

Blz Matheus, tá feito. Mas o código que coloquei no css preciso tirar? ou deixa lá?

Sim, permanece. É um conjunto, primeiro você importa a fonte e depois você dá o comando para colocar a fonte onde desejar, no seu caso, em toda loja, conforme fez. Está certinho agora.

1 curtida

@Matheus, essa orientação sobre a configuração das fontes permanece válida na V2? Acessei o Github e não encontrei a pasta @custom-html :grimacing:

@Carlos Carlos, vc conseguiu o link lá no google fonts? dá pra fazer direto no cms… layout, inserir código, html antes da head…

@Rogerio valeu mesmo cara! O link eu consegui, só precisava saber como aplicar! Ficou muito prático!

@Matheus, @leonardo coloquei a fonte como o @Rogerio indicou, mas ela não funcionou em toda a loja.

  • Páginas criadas estão com a fonte padrão do template;
  • Produtos com descrição mais longa também, já outros a fonte alterou;
  • Na página do produto o nome foi alteado para a fonte instalada, mas abaixo dele não (Código, valores, qtd em estoque)

Valeu!!!

@Carlos mas vc colocou um código também no css? Se não acho que não funciona mesmo, algo assim:

body {
font-family: sua fonte !important;
}

1 curtida

@Rogerio bacana!
Coloquei o código lá, vamos ver se funciona!
Valeu pelas dicas!!!

1 curtida

Não tem mais a pasta @custom-html porque na v2 facilitamos a edição direto do HTML (EJS) padrão mesmo, além de possibilitarmos a inserção de HTML no CMS como o @Rogerio sugeriu :slight_smile:

2 curtidas

A sugestão do @Rogerio foi perfeita, o !important vai resolver o problema e aplicar a fonte em toda a loja.

Mas na verdade na sua edição temos um errinho de sintaxe @Carlos , o correto seria:

body {
  font-family: 'Ubuntu', sans-serif !important;
}

Note que eu removi um ; que você tinha mantido após o sans-serif.

Você inseriu o código direto no GitHub (o que é até melhor), mas também funcionaria se inserido no CMS em Layout > Inserir código > CSS customizado.

Valeu @leonardo, já ia pedir ajuda pra vc! Pq tava vendo que dava erro na hora do update.

Errando e aprendendo…kkkkk

1 curtida

Mais uma curiosidade (good practice), como vocês já estão editando direto no GitHub (:heart:) outra forma de fazer esta mesma alteração é setando uma variável SCSS, neste caso em específico bastaria adicionar o trecho abaixo logo no início do arquivo template/scss/_variables.scss:

$font-family-sans-serif: "Ubuntu", sans-serif;

Neste caso não precisaria do !important :slightly_smiling_face:

3 curtidas

Fui proativo haha :grin:

1 curtida

Muito! Mas isso que é bom! Passando informações importantes para agregar conhecimento para todos! Parabéns!!!

1 curtida

@leonardo a alteração de fonte não rolou não… :sleepy:
Inclusive tirei a linha do _styles.scss e fiz como você tinha indicado e coloquei no _variabless.scss mas na loja não teve mudanças… Aonde será que fiz besteira?

Os pontos que ainda ficaram com outra fonte é por causa do tema escolhido.

O mais notório está em parágrafos eu acho, neste caso o tema definiu o uso de fonte serif (Ubuntu é sans-serif), pra continuar usando o tema mas reverter isto você tem que adicionar o seguinte em custom-css/_styles.scss:

p {
  font-family: $font-family-sans-serif;
}

Ou uma bala de canhão em CSS mesmo, que poderia ser inserido no CMS também:

body, p, .btn {
  font-family: 'Ubuntu', sans-serif !important;
}
2 curtidas

Certinho @leonardo, adicionei no _styles.scss e agora ficou TOP!!! Valeu!

Olá. Gostei dessa bateria e até implementei, mas a minha dúvida é: esse css customizado com a fonte escolhida não vai afetar a versão mobile, não é mesmo?
Uma outra questão: é possível usar a customização com mais de uma fonte diferente da fonte padrão do template, em seções específicas da loja?