Google Fonts em VSCode
Olá, sou iniciante e estou com uma dificuldade que não consigo resolver.
Não consigo usar fontes do Google Fonts em meus projetos, eles simplismente não carregam na página, tanto no arquivo HTML quanto no CSS. No início pensei que era meu pc que é fraco, mas depois utilizando o notebook da minha esposa, que é menos pior, também não consegui fazer com que carregasse e alterasse as fontes da página.
É algum problema de configuração?
OBS: Estou utilizando o Google Chrome como meu navegador
Boa tarde Renato, essa configuração pode variar de acordo como o seu projeto foi criado, mas de forma simples voce deve primeiro inserir tanto o link para a font como o style.
<html>
<head>
<meta charset="utf-8">
<!-- Aqui vai ser feito o download da font pelo navegador -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<!-- Aqui voce define que o estilo de tudo que estiver dentro da tag <body> deverá usar a fonte tangerine preferencialmente, caso não seja possível deverá utilizar uma font com estilo serif -->
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Lembrando que por boas práticas deve informar mais de uma fonte pois nem todos os dispositivos e/ou navegadores conseguem redenrizar fontes personalizadas.
Caso tenha alguma dúvida coloca o pedaço do seu código, pois assim ajuda a identificar a provável razão de não estar funcionando.
Olá Renatoglima!
Para importar as fontes em um projeto com HTML de um provedor externo, como o Google Fonts, existem algumas maneiras:
Método 01 - Por Link HTML
Passo 01 - Selecionar as fontes
Você precisa selecionar quais fontes você quer utilizar (neste exemplo, estou utilizando a https://fonts.google.com/specimen/Roboto Thin (100)), e pegar o código correspondente na sidebar da direita:
<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=Roboto:wght@100&display=swap" rel="stylesheet">
Passo 02 - Incluir os links no seu código
Agora é hora de incluir o código correspondente dentro do cabeçalho da sua página (tag head), ficando assim:
<html>
<head>
<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=Roboto:wght@100&display=swap" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
Deu para perceber que existem 3 links diferentes, sendo que eu selecionei somente uma fonte. As funcionalidades de cada um são:
-
- Fazer a conexão e autenticação com o site de fontes do google de forma assíncrona
-
- Fazer a conexão e autenticação com o site de arquivos estáticos do google (a fonte não precisa ser gerada a cada vez que uma pessoa quer a fonte. Ela é estática, e servida em um domínio a parte pelo próprio Google)
-
- Download de todas as fontes que você selecionou no site do Google Fonts (independente de variedade ou tipos de fontes, todas são baixadas na terceira linha somente)
Passo 03 - Começar a utilizar no CSS
Agora, você pode utilizar no seu código a fonte em questão, estilizando algum texto que queira, como por exemplo:
h1 {
font-family: 'Roboto', sans-serif;
}
É importante ressaltar, que caso ocorra algum erro em utilizar a fonte em questão (no caso, a Roboto), ele irá para a segunda opção que foi definida, que neste caso, foi a fonte sem serifa padrão do navegador do usuário
Método 02 - Importando com @import
Passo 01 - Incluir a importação da fonte no CSS
Este método pode não funcionar muito bem dependendo do compilador CSS que você utilize, ou alguns navegadores pode não ter o devido suporte.
Mas, para utilizar, basta incluir no seu CSS o seguinte:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
Passo 02 - Começar a utilizar no CSS
Agora, você pode utilizar no seu código a fonte em questão, estilizando algum texto que queira, como por exemplo:
h1 {
font-family: 'Roboto', sans-serif;
}
É importante ressaltar, que caso ocorra algum erro em utilizar a fonte em questão (no caso, a Roboto), ele irá para a segunda opção que foi definida, que neste caso, foi a fonte sem serifa padrão do navegador do usuário.
Espero ter ajudado!
Você precisa importar a fonte em uma tag do tipo link dentro da tag <head> (nesse caso aqui eu estou usando a fonte Ubuntu):
<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=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
Depois você vai no seu arquivo CSS e adicione esse código:
html {
font-family: 'Ubuntu', sans-serif;
}
Isso vai depender de qual fonte você importou. Ah, verifique também se você importou seu arquivo CSS lá ná página. 😃👍🏻
Eu testei aqui no meu e não deu nenhum erro,talvez pode ser algum ploblema no seu codigo Vê se você está usando a forma certa:
Css(exemplo):
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
Html(exemplo):
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2family=Poppins:wght@600&display=swap"rel="stylesheet">
</head>
Poderia compartilhar o codigo?
Oi, @Renatoglima! Tudo bem?
Você poderia compartilhar com a gente o código que está utilizando pra tentar importar as fontes? Dessa forma a gente consegue ter um ponto de partida melhor pra poder ajudar 😊
Titulo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident ab quis quam neque sunt fugiat eaque repudiandae atque molestias ex! Suscipit exercitationem minus pariatur molestias consequatur atque, eveniet saepe. Iusto.
Subtitulo com outra fonte
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat, totam consectetur quae atque unde reiciendis beatae vel sit delectus libero ipsum, quibusdam consequuntur exercitationem. Harum nobis dignissimos cumque adipisci possimus?