Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Não consigo criar uma variável para a fonte Poppins

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Importando fontes

por Renan Turatti Diter
| 42.9k xp | 2 posts
Analista de Faturamento

Importei a fonte corretamente do Google Fonts, porém não consigo utilizar ela. Ao criar uma váriavel, todas as fontes que não a fonte Laranja ("Categorias") do menu, desaparecem, e não consigo encontrar soluções possíveis.

index.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset.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="./styles.css">
    <title>AluraBooks</title>
</head>

styles.css

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


:root {
    --cor-de-fundo: #EBECEE;
    --branco: #FFFFFF;
    --laranja: #EB9B00;
    --azul-degrade: linear-gradient(160deg, #002F52 0%, #326589 100%)
    --fonte-primaria: "Poppins";
}

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

Vi outros posts, um falando sobre por ser uma variável tipo "String", de deixar a variável entre aspas. E outro para deixar a importação antes do reset.css, mas também não funcionou. Alguém saberia o que pode ser?

1 resposta
solução!
por Victor Costa Santos
| 2065k xp | 4023 posts
Alura Scuba Team Monitor do suporte educacional

Olá, Renan!

Notei um pequeno erro de digitação no seu arquivo CSS que pode ser a causa do problema.

No seu arquivo CSS, você definiu a variável como --fonte-primaria: "Poppins";, mas depois, ao tentar usá-la, você chamou var(--fonte-principal);. Note que você definiu a variável como "primaria", mas está tentando chamá-la como "principal". Essas são duas palavras diferentes, então o CSS não consegue encontrar a variável "principal" que você está tentando usar, outra observação é que está faltando um ";" ponto e vírgula no final da linha anterior que cria a variável do azul-degrade.

Aqui está a correção:

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

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

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

Agora, o CSS deve ser capaz de encontrar a variável correta e aplicar a fonte Poppins ao seu projeto.

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!