Executando verificação de segurança...

1 min de leitura ·

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.

Autor

Ivanildodev, acredita que não rolou a mudança de fonte aqui pra mim?

Estou usando o liveserver e rodando pelo Chrome

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:

1. Fazer a conexão e autenticação com o site de fontes do google de forma assíncrona
1. 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)
1. 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!

Autor

Griss, obrigado pelo empenho e ajuda mano!

O B.O é que nem no modo HTML e nem no CSS eles estão "carregando". Isso que está me deixando meio puto kkkkk. Apenas font-face que está surtindo efeito

Bom, agora o erro já não parece tão claro hehehe
tem algum erro no console ou na aba de requisições? Já tentou baixar a fonte e importar ela como arquivo para utilizar depois?

Autor

Então, já fiz por font-face e dá certo...

Mas aqui nesse post já descobriram o 'erro'... era espaçamento e pontuação.

Mesmo copiando e colando do Google Fonts ele vem com espaçamentos e pontuações erradas, então precisa de uma atenção em 'formatar' @import para ele conseguir rodar.

Louco, né?

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. 😃👍🏻

Autor

GabrielSozinho, esse é para casos em HTML, correto?

correto! Em casos que você queira importar no CSS, você faz assim:

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

e adiciona o mesmo código que falei ali. (o segundo)

novamente, caso não funcione, verifique se a fonte não está sendo definida em nenhuma outra parte do CSS e que seu CSS está sendo importado na página HTML.

Você está usando algum tipo de CSS Reset?

Autor

Fala mano, então não uso CSS Reset, ainda não sei o que é isso, mas vou pesquisar!

O Hurick aqui em baixo solucionou o problema, eram espaçamentos e pontuação errada, veio errado mesmo eu copiando e colando do Google Fonts.

Mas obrigado pelo empenho mano

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?

Autor

Aleatorio 39- Compartilhei em um post posterior mano, Obrigado!

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 😊

Autor

Fala Hurick, tudo bem mano, e vc?

Segue abaixo o código:

Fontes com Google Fonts @font-face { font-family: 'gelo'; src: url(04B_.TTF) format('truetype'); } @font-face { font-family: 'Pantherdam'; src: url('Pantherdam Signature.otf') format('opentype'); } @font-face { font-family: 'PanI'; src: url(Pantherdam\ Signature\ Italic.otf) format('opentype'); } @import url('https://fonts.googleapis.com/css2? family= Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100; 1.200;1.300;1.400;1.500;1.600;1.700;1.800;1.900 & display=swap'); @import url('https://fonts.googleapis.com/css2?family= Kaushan+Script&display=swap'); @import url('https://fonts.googleapis.com/css2?family= Fredericka+the+Great & display = swap'); @import url('https://fonts.googleapis.com/css2?family= DotGothic16 & display = swap'); body{ font-family: 'Kaushan Script'; } h1 { font-family: 'Fredericka the Great'; font-size: 48px; color: tomato; } h2{ font-family: 'Pantherdam'; font-size: 36px; color: brown; } </style>

Titulo

<p>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.</p>

<h2>Subtitulo com outra fonte</h2>

<p>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?<p>

OBS: deixei tudo numa pagina só para facilitar. As font-faces funcionam perfeitamente!

Tudo em ordem por aqui também, meu caro.
Obrigado por perguntar!

Olha, pelo que estava olhando aqui, peguei teu código e colei no meu VS Code pra dar uma olhada, em um arquivo do tipo CSS e o resultado foi o seguinte:

imagem
(Clique com o botão direito pra abrir em uma nova guia e poder ver melhor)

Repare que nos links, alguns espaços se encontram aí no meio.
Você pode confirmar se isso também está acontecendo aí no teu código?

Pergunto, porque se for o caso, as fontes não estão sendo encontradas justamente por causa desses caracteres a mais. Os links, sem os espaços extras, seriam o seguinte:

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

Faz o teste aí e me fala 😊

EDIT: Esqueci de avisar que também corrigi alguns . que estavam no meio da fonte Work Sans invés de , que é o correto.

Autor

Hurick, vc acertou mano, era exatamente esse o problema!

Mas sabe o que é o mais foda? É que eu fiz Ctrl+C Ctrl+V do próprio Google Fonts.

Salvou o Role, muito obrigado!

Vou me atentar quando copiar as fontes de lá

HAHAHAHAHA acontece, meu rei, não se preocupe! Eu imaginei que poderia ser algo desse tipo porque eu já vi acontecer, pra ser bem honesto contigo.

O importante é que você resolveu e saiu com um upgrade no conhecimento. Fico muito feliz.

Bons códigos pra você, meu caro! Divirta-se!