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

[Dúvida] A fonte nao foi Importada - Como importar fonte?

Estou seguindo o projeto a risca e tentei de varias outra maneiras tambem, porem a Fonte "Poppins" nao foi importada e entao nao muda na minha pagina. Como posso fazer para importar a fonte e ela funcionar na pagina??

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alurabooks</title>
    <link rel="stylesheet" href="styles.css">
    <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:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="reset.css">
    
</head>


: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;
}
2 respostas
solução!

Bom dia, Iago. Acho que o problema está na ordem de importação das folhas de estilo no HTML. Lembre sempre que o HTML/CSS são executados linha a linha. Primeiro está sendo importada a folha de estilos principal e somente depois a fonte que você usa na folha de estilo, e depois ainda tem o reset.css que redefine as tags. Tenta colocar a importação do reset.css na linha onde está o styles.css e vice-versa.

Espero ter ajudado, qualquer coisa estou a disposição.

Bons estudos.

Muito obrigado!! Entendi o erro, e depois de arrumar deu certo!!!

<link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
    <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:wght@300;400;500;700&display=swap" rel="stylesheet">