2
respostas

Minha fonte Montserrat não carrega no código

Em nenhum lugar que eu aplico a fonte ela aparece segue link do projeto https://prod.liveshare.vsengsaas.visualstudio.com/join?EB5107253580480456B19294809C02A12AB3

2 respostas

Olá, Beatriz.

Tudo bem?

OBS(Eu fui acessar o seu link e até abre o VSCode online, porém não mostra o código, pede para logar com a conta do Google e quando eu logo, fala que não tenho permissão para acessar, você pode ver se tem como compartilhar sem pedir acesso, ou compartilhar o seu código de forma diferente).

De todo modo, vou deixar um passo a passo de como importar e utilizar a fonte:

Passo 1: Escolha a Fonte

Escolha a fonte que deseja usar em seu projeto no site do Google Fonts em https://fonts.google.com/.

Passo 2: Obtenha o Código de Importação

Na página de detalhes da fonte que você escolheu, vá para a seção "Integração". Você encontrará um código de importação que se parece com o seguinte:

@import url('https://fonts.googleapis.com/css2?family=NOME_DA_FONTE&display=swap');

Copie esse código.

Passo 3: Crie ou Abra seu Arquivo CSS

Abra o arquivo CSS em que deseja usar a fonte em um editor de código ou IDE de sua escolha.

Passo 4: Cole o Código de Importação

Cole o código de importação no início do seu arquivo CSS. Por exemplo:

/* Importe a fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=NOME_DA_FONTE&display=swap');

/* Resto do seu código CSS */
body {
    font-family: 'NOME_DA_FONTE', sans-serif;
}

h1 {
    font-family: 'NOME_DA_FONTE', sans-serif;
}

Lembre-se de substituir "NOME_DA_FONTE" pelo nome real da fonte que você escolheu.

Passo 5: Aplique a Fonte em seu CSS

Agora você pode usar a fonte em qualquer seletor CSS em seu arquivo. No exemplo acima, apliquei a fonte tanto ao texto do corpo (body) quanto aos cabeçalhos (h1). Você pode personalizar como e onde a fonte é aplicada de acordo com suas necessidades de design.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Essa é a parte style do meu projeto @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

*{ margin: 0; padding: 0;

}

body{ height: 100vh; box-sizing: border-box; background-color: black; color: white; } .titulo-destaque{ color: #8C20C7;

}

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

.apresentacao__conteudo{ width: 615px; display: flex; flex-direction: column; gap: 40px;

}

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

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

.apresentacao__links{ display: flex; justify-content: space-between; }

.apresentacao__links__link{ background-color: #8C20C7; width: 280px; text-align: center; border-radius: 16px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color:black font-family: 'Montserrat', sans-serif; }

Essa é a parte index do meu projeto

Eleve seu negócio digital a outro nível um Front-end de qualidade!

Olá! Sou Beatriz Victa, 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?
    <img src="Imagem.png" alt="Foto ">
</main>
<footer></footer>
</footer>