Entrar Ainda não tem acesso?
1
resposta

Implantando a fonte

Referente ao curso HTML e CSS: responsividade com mobile-first

por Italo Magno
| 36.1k xp | 7 posts

Adicionei a font-family na tag body, como a instrutora fez porém não mudou no projeto.

body{
    background-color: var(--cor-fundo);
    font-family: var(--font-principal);
    font-size: 16px;
    font-weight: 400;

}

Então testei em colocar diretamente nas tag que está escrito o texto no caso abaixo:

.lista-menu{
    font-family: var(--font-principal);
    font-size: 16px;
    font-weight: 400;
    display: none;
    position: absolute;
    top: 100%;
    width: 50vw;
}

.banner__titulo{
    font-family: var(--font-principal);
    font-size: 18px;
    font-weight: 700;
}

.banner__texto{
    font-family: var(--font-principal);
    font-weight: 500;
    margin: 1em 0;
}

.banner__pesquisa{
    background-color: transparent;
    border: 1px solid var(--branco);
    color: var(--branco);
    border-radius: 24px;
    padding: 1em;
    width: 100%;
}

Desejo saber então porque só colocar no na tag body não estilizou todas as tags presente nela

1 resposta
por Victor Costa Santos
| 1937.4k xp | 3735 posts
Alura Scuba Team Monitor de ForumOps

Olá Italo,tudo bem?

Estranho, você aplicou a font-family no elemento body, então todos os elementos dentro do body deveriam herdar essa propriedade.

Mas o que pode está acontecendo é que algum outro CSS pode estar sobrescrevendo a sua declaração. Isso pode acontecer se você tiver outro CSS que é carregado depois do seu e que aplica uma font-family diferente nos mesmos elementos. Para verificar isso, você pode usar a ferramenta de inspeção do seu navegador e ver se a font-family que você definiu está sendo aplicada aos elementos.

No mais verifique o seu código e se algo semelhante a isso:

:root {
    --cor-de-fundo: #EBECEE;
    --branco: #FFFFFF;
    --laranja: #EB9B00;
    --azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
    --fonte-principal: "Poppins";--fonte-principal: "Poppins";  
    
    /*Continuação do código*/
    
}

body {
    background-color: var(--cor-de-fundo);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
}

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!