Importando fontes do Google Fonts

Descubra como usar uma vasta biblioteca de fontes gratuitas para seus projetos.

Você já aprendeu a usar as font-family seguras para web e as famílias genéricas. No entanto, para dar uma identidade visual única e profissional ao seu site, muitas vezes você precisará de fontes mais exclusivas. É aí que entram as Web Fonts, e o Google Fonts é a plataforma mais popular e fácil de usar para isso.

O Google Fonts oferece uma vasta biblioteca de fontes gratuitas e de código aberto que você pode usar em seus projetos web. Elas são hospedadas pelo Google, o que significa que você não precisa se preocupar em baixar e hospedar os arquivos da fonte em seu próprio servidor.

Pense no Google Fonts como uma biblioteca gigante de "caligrafias" prontas para usar. Você escolhe a que mais gosta, pega emprestado (importa) e usa no seu projeto, sem ter que desenhar a sua própria.

Por que usar Google Fonts?

  • Variedade: Milhares de fontes para escolher, cobrindo diversos estilos e propósitos.
  • Gratuito e Open Source: Todas as fontes são gratuitas e podem ser usadas em projetos comerciais e pessoais.
  • Fácil de Usar: O processo de importação é simples e bem documentado.
  • Performance: As fontes são otimizadas e servidas por uma CDN (Content Delivery Network) global do Google, garantindo carregamento rápido.
  • Compatibilidade: Funciona em todos os navegadores modernos.

Como importar fontes do Google Fonts

Existem duas maneiras principais de importar fontes do Google Fonts para o seu projeto:

Método 1: Usando a tag <link> (Recomendado)

Este é o método mais comum e geralmente o mais recomendado para a maioria dos casos, pois o navegador pode começar a baixar as fontes mais cedo.

Passo a passo:

  1. Escolha sua(s) fonte(s): Vá para o site fonts.google.com.

  2. Selecione os estilos/pesos: Para cada fonte que você escolher, clique nela e selecione os pesos (font-weight) e estilos (font-style) que você pretende usar (ex: Regular 400, Bold 700, Italic). Importante: Selecione apenas os pesos e estilos que você realmente vai usar para não carregar dados desnecessários e otimizar a performance.

  3. Copie o código <link>: Após selecionar, o Google Fonts gerará um código <link> na barra lateral direita. Copie este código.

  4. Cole no seu HTML: Cole o código <link> dentro da seção <head> do seu arquivo HTML, antes da sua tag <link> para o CSS (se você tiver um arquivo CSS externo) ou antes da sua tag <style>.

    <!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Meu Site com Google Fonts</title>
  <!-- Código do Google Fonts -->
  <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@400;700&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  <!-- Seu CSS -->
  <link rel="stylesheet" href="style.css">
  <style>
    /* Seu CSS interno */
  </style>
</head>
<body>
  <!-- Conteúdo -->
</body>
</html>

  5. Use a fonte no seu CSS: Agora você pode usar a font-family no seu CSS, exatamente como o Google Fonts indica.

    body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700; /* Certifique-se de ter selecionado o peso 700 */
}

.italic-text {
  font-family: 'Open Sans', sans-serif;
  font-style: italic; /* Certifique-se de ter selecionado o estilo italic */
}

Método 2: Usando @import no CSS

Este método permite importar as fontes diretamente do seu arquivo CSS.

Passo a passo:

  1. Escolha sua(s) fonte(s) e estilos/pesos: (Mesmo passo 1 e 2 do método anterior).

  2. Copie o código @import: No Google Fonts, na barra lateral, selecione a opção @import. Copie o código gerado.

  3. Cole no seu CSS: Cole o código @import no início do seu arquivo CSS (ou dentro da sua tag <style>), antes de qualquer outra regra CSS.

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap');

/* Suas regras CSS começam aqui */
body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

Qual método escolher?

  • <link> (Recomendado): Geralmente tem um desempenho ligeiramente melhor porque o navegador pode processar o <link> mais cedo, permitindo que as fontes sejam baixadas em paralelo com outros recursos.
  • @import: Pode ser mais conveniente se você estiver trabalhando apenas com arquivos CSS e não quiser mexer no HTML. No entanto, pode causar um "Flash of Unstyled Text" (FOUT) mais perceptível, onde o texto é exibido com uma fonte padrão antes da web font ser carregada.

Boas Práticas ao usar Google Fonts:

  • Selecione apenas o que precisa: Carregar muitos pesos e estilos de fontes desnecessariamente aumenta o tempo de carregamento da página.
  • Inclua um fallback: Sempre adicione uma família genérica (sans-serif, serif, monospace) no final da sua font-family para garantir que o texto seja exibido caso a web font não carregue.
  • display=swap: O Google Fonts já inclui &display=swap no URL. Isso instrui o navegador a exibir o texto com uma fonte padrão rapidamente e depois "trocar" para a web font quando ela estiver carregada, melhorando a experiência do usuário.
  • Teste: Verifique como suas fontes se comportam em diferentes navegadores e dispositivos.

Usar o Google Fonts é uma maneira fantástica de elevar o design do seu site, adicionando personalidade e profissionalismo com facilidade e performance.