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

Propriedade font-family não está funcionando em Body

Olá. Estou com um problema estranho. A propriedade font-family não está funcionando quando eu a adiciono direto em body no CSS, mas funciona se eu coloco individualmente em cada regra. Podem ajudar? Códigos HTML e CSS abaixo.

CÓDIGO HTML

<!DOCTYPE html>

<html lang = "pt-br">

    <head>
        <meta charset = "UTF-8">
        <title>Site de terapia padrão</title>
        <link rel = "stylesheet"  href= "stylesheet.css">
        <link rel = "stylesheet"  href= "reset.css">
        <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">

    </head>

    <body>

        <header class = "header">

            <div class = "caixa-top-informacoes">

                <!-- HTML NAV 1 - INFORMAÇÕES DO TOP-->

                <nav class = "lista-top">

                    <li>Atendimento de Segunda a Sexta das 9h às 18</li>

                    <img class = "img-localizacao" src = "imagens/icon-localizacao.png">
                    <li> Avenida Endereço, 1234, São Paulo - SP </li>

                    <img class = "img-email" src = "imagens/icon-email.png">
                    <li> email@provedor.com.br </li>

                    <li>Primeira consulta com valores especiais </li>

                </nav>

            </div>

            <div class = "caixa-meio-telefone"> 

                <!-- HTML NAV 2 - LOGO E TELEFONE-->

                <nav class = "lista-meio">

                    <img class = "logo" src = "imagens/logo-generico-tratado.png">
                    <li> Ligue agora: 0800 99 99</li>
                    <li><input class = "botao-consulta" type="submit" value = "Marque uma consulta"></li>

                </nav>

            </div>



        </header>





    </body>






</html>

CÓDIGO CSS


body{

}

.header{

    width:100%;
}


.caixa-top-informacoes{

    background:rgb(245,245,245,1);
    top:0px;
    width:100%;
    padding:1em;
    text-align: center;

}

.img-localizacao{

    width:10px;

}

 .img-email{

     width:15px;
 }


.lista-top li {
    display:inline;
    padding:0px 15px 0 0;
    position:flex;
    font-size:14px;
    color:#42474c;
}

.lista-top li:nth-child(1){

    padding:0 200px 0 0;
}

.lista-top li:nth-child(6){
    color:#3d3272;
    font-weight:600;
}


/* CSS PARA A NAV 2 - MEIO*/

.caixa-meio-telefone{
    width:100%;
    position: absolute;
    text-align: center;


}

.lista-meio{
    padding:50px; 
}



.lista-meio li {
    font-size:14px;
    color:#42474c;
    display:inline;
    padding-left:50px; 

}

.lista-meio .logo {

    width:150px;
    padding-right:150px;
    vertical-align: middle;

}

.lista-meio li:nth-child(2){

    color:#007ac8;
    font-size:2em;

}

.botao-consulta{

    color:purple;
    padding:20px 35px;
    border-radius: 5px;
    border:none;
    background:#00c8b7;
    font-size:1em;
    color:white;
    text-transform: uppercase;
    cursor: pointer;
    font-weight:bold;
    transition: 0.5s;

}

.botao-consulta:hover{
    background:#007ac8;,
    transition: 0.5s;
}
7 respostas

Oi, Maria, tudo bem?

Aqui no sseu código CSS não há declaração do font-family, você já adicionou a linha:

font-family: 'Lato', sans-serif;

dentro da tag body ou da qual você deseja estilizar com essa fonte?

solução!

Oi, Laís, acabei não colocando no código aqui mas, quando coloco, ela não funciona para todo o site :( só funciona, estranhamente, para o único botão que tem. Não estou conseguindo pensar em qual pode ser o problema.

Oi, Maria, tudo bem?

PErcebi agora que você está utilizando o reset.css, caso que você queira algo padrão no seu site, você coloca, lá, então, na tag body dentro do reset.css, coloque:

body {
  font-family: "Lato", sans-serif;
}

Agora, irá funcionar :}

Bons estudos!

Oi, Laís, obrigada, funcionou!

Uma dúvida, é importante que eu sempre use o arquivo reset na construção dos sites? No curso, fiquei com a impressão de que sim, mas agora fiquei meio confusa.

Outra dúvida, como estou tentando fazer sites aleatórios e genéricos para treinar, a melhor forma de resolver minhas dúvidas é por aqui mesmo?

Abs,

Oi, Maria, tudo bem?

É sim, o reset.css irá tirar essas formatações que vem por padrão nos navegadores. Inclusive, sairá um texto esses dias no blog da alura falando sobre o reset.css e a sua importância.

Você pode falar comigo fora daqui, você utiliza algum canal de comunicação com slack ou discord?

Olá! Comecei a usar o discord há pouco, ainda estou me acostumando! Acho que se eu te passar meu id vc me acha né? M. Eugênia#9741

Obrigada por toda a ajuda!

Oi, Maria :}

Te adicionei lá no Discord. Acho que você já está sabendo da nossa imersão de HTML e CSS semana que vem né? Segue o link: https://www.alura.com.br/imersao-hipsters-css

Estou no discord, me chame lá :}}