Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não consigo aplicar a fonte direto no BODY

Quando eu insiro font-family: var(--fonte-principal) dentro do body não funciona, porém se eu aplico dentro de uma classe, ela funciona.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Oii, tudo bem contigo?

Parece que você está enfrentando um problema ao usar a propriedade font-family com a variável --fonte-principal no CSS.

No seu código, a variável --fonte-principal está definida como "Poppins", mas é importante lembrar que o nome de uma fonte deve ser especificado como uma string. Nesse caso, você precisa envolver o valor da variável entre aspas.

Aqui está a correção para o trecho onde você está tentando aplicar a variável --fonte-principal à propriedade font-family da tag body:

body {
  background-color: var(--cor-de-fundo);
  font-family: 'var(--fonte-principal)';
}

Ao envolver var(--fonte-principal) com aspas, você estará indicando que o valor é uma string.

Dessa forma, a variável --fonte-principal deve funcionar corretamente dentro da propriedade font-family da tag body. Certifique-se também de que a fonte "Poppins" esteja sendo importada corretamente no seu projeto.

Agora se você definir a variável --fonte-principal como --fonte-principal: 'Poppins', sans-serif; dentro de :root, ela poderá ser usada tanto na propriedade font-family do body quanto do .cabecalho ou outras tag´s.

Aqui está o código em questão corrigido:

:root {
  --cor-de-fundo: #EBECEE;
  --branco: #ffffff;
  --laranja: #EB9B00;
  --azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
  --fonte-principal: 'Poppins', sans-serif;
}

Nesse caso, a variável --fonte-principal possui o valor 'Poppins', sans-serif;, que é uma forma válida de especificar uma fonte com fallback para uma fonte genérica sans-serif.

Dessa forma, a variável --fonte-principal será aplicada corretamente tanto ao body quanto ao .cabecalho, fornecendo a fonte "Poppins" com uma fallback para sans-serif caso a primeira não esteja disponível.

Em suma seria, isso, se ficou muito confuso me avise, que eu mudo a forma de explicar e resumo um pouco o conteúdo!

Espero ter ajudado, abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓

No meu aconteceu a mesma coisa e não estava sendo aplicada, fiz a alteração que o Renan Cezar falou e mesmo assim não resolveu, então optei por declarar em cada classe mesmo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software