Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Fonte do Menu Hamburguer não muda

Boa noite pessoal, estou fazendoo projeto da AluraBooks, e no menu hamburguer estou tentando mudar a fonte do projeto para "Poppins", porem mesmo copiando código do google fontes ela não muda, inseri alguma linha de código errada? styles.css ↓↓

@import url("styles/header.css");

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

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

index.html ↓↓

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="reset.css">
     <title>AluraBooks</title>
     
</head>

<body>
     <header class="cabeçalho">
          <div class="container">
               <input type="checkbox" id="menu" class="container__botao">
               <label for="menu">
                    <span class="cabeçalho__menu-hamburguer container__imagem"></span>
               </label>
               <ul class="lista-menu">
                    <li class="lista-menu__titulo">Categorias</li>
                    <li class="lista-menu__item">
                         <a href="#" class="lista-menu__link">Programação</a>
                    </li>
                    <li class="lista-menu__item">
                         <a href="#" class="lista-menu__link">Front-end</a>
                    </li>
                    <li class="lista-menu__item">    
                         <a href="#" class="lista-menu__link">Infraestrutura</a>
                    </li> 
                    <li class="lista-menu__item">
                         <a href="#" class="lista-menu__link">Business</a>
                    </li>
                    <li class="lista-menu__item">
                         <a href="#" class="lista-menu__link">Design & UX</a>

                    </li>
               </ul>
               <img src="img/Logo.svg" alt="Logo da AluraBooks" class="container__imagem">
          </div>
          <div class="container">
               <a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos" class="container__imagem"></a>
               <a href="#"><img src="img/Compras.svg" alt="Carrinho de Compras" class="container__imagem"></a>
               <a href="#"><img src="img/Usuário.svg" alt="Meu Perfil" class="container__imagem"></a>
          </div>
     </header>
</body>

</html>
1 resposta
solução!

Olá Nicollas!

Primeiramente, peço que inclua este link no seu HTML, que é o mesmo da aula. Pode não ser a razão, mas é válido para garantir.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">

Logo depois, se não houver mudanças, peço que verifique com outra fonte primeiro para testarmos se não há erro em algum link entre os arquivos CSS e HTML. No arquivo de estilo(style.css), faça o seguinte teste: utilize uma fonte qualquer e veja se há diferença.

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

Se a fonte foi alterada, pode ter ocorrido um erro no Google Fonts. Nesse caso, sugiro testar outra fonte. Se o problema persistir, por favor, compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos utilizados através do Google Drive. Assim, poderei realizar os testes necessários e ajudá-lo de forma mais eficaz.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

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!