Entrar Ainda não tem acesso?
1
resposta

Fontes não atualizam no projeto

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Estilos de texto e fontes e atividade Importando fontes

por Luana Aparecida De Noronha
| 87.7k xp | 2 posts

Não sei o que pode estar errado, a única coisa que está diferente é o link de importação, porque parece que o próprio google fonts mudou, mas mesmo tentando com o link do código original também não dá....

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap')

* {
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #f6f6f6;
}

.destaque-titulo{
    color:#22D4FD;
}

.apresentacao{
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo{
    width: 615px;
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

Meu código:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong class="destaque-titulo"> com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Luana Noronha, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <a href="https://instagram.com/noronhaluana">Instagram</a>
            <a href="https://github.com/noronhaluana">GitHub</a> 
        </section>
        <img src="Imagem.png" alt="Foto de Luana">
    </main>
    <footer></footer>
</body>
</html>
1 resposta
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá Luana, como vai? Espero que esteja bem!

O google fonts atualizou e algumas coisas mudaram! Com isso, deixo aqui este tópico com o passo a passo para incluir a fonte no projeto, ok?

Analisei seu códio e achei a seguinte solução:

Index.html :

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfólio</title>
    <link rel="stylesheet" href="style.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=Krona+One&display=swap" rel="stylesheet">
</head>

<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível<strong class="destaque-titulo"> com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Luana Noronha, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <a href="https://instagram.com/noronhaluana">Instagram</a>
            <a href="https://github.com/noronhaluana">GitHub</a> 
        </section>
        <img src="Imagem.png" alt="Foto de Luana">
    </main>
    <footer></footer>
</body>
</html>

A mudança que fiz no arquivo index.html se trata do código de importação do google fonts.

Style.css:

.krona-one-regular {
    font-family: "Krona One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
* {
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #f6f6f6;
}

.destaque-titulo{
    color:#22D4FD;
}

.apresentacao{
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo{
    width: 615px;
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

Como já importei a fonte no arquivo html, agora inclui no css.

Espero ter ajudado!

Caso tenha alguma dúvida, fico à disposição.

Abraços e bons estudos! :D