Como adicionar Google Fonts ao seu site (3 jeitos fáceis)

Para adicionar uma fonte do Google ao seu site, você faz dois trabalhinhos: carregar a fonte e avisar o seu texto para usá-la. Dá para carregar com uma tag <link> no cabeçalho (o head) da página, com uma linha @import no topo do seu CSS ou a partir de arquivos de fonte que você mesmo hospeda. O jeito mais rápido de ter as linhas exatas é a extensão grátis FontMee: você testa a fonte no seu próprio site, aperta Copiar CSS e cola. Abaixo estão os três jeitos, com código que você pode copiar do jeito que está.

O que “adicionar uma fonte” realmente significa

Pense numa fonte como um convidado de um jantar. Primeiro você precisa convidar, ou seja, a sua página precisa baixar o arquivo da fonte. Depois precisa dar um lugar à mesa, ou seja, avisar o texto para usá-la. Se pular o convite, a fonte nunca aparece. Se pular o lugar, ela fica num canto enquanto o seu texto segue com a fonte de sempre.

Os dois trabalhos são escritos em CSS, o conjunto de regras de estilo que diz a um site como ele deve ficar. O convite vai no head da página (uma área escondida no topo do HTML onde o navegador lê as instruções) ou bem no topo do seu arquivo CSS. O lugar à mesa é uma regra curta, como a dos exemplos abaixo. Qualquer jeito que você escolher, esses dois trabalhos continuam iguais.

Jeito 1: uma tag link no head da sua página

É o método que o próprio Google mostra no site dele. Você coloca três linhas no head da página: duas que dizem ao navegador para se preparar para conectar ao Google e uma que carrega a fonte. Costuma carregar um pouco antes dos outros jeitos, porque o navegador pode começar a buscar a fonte antes mesmo de ler o seu CSS.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

A última parte do link, display=swap, diz ao navegador para mostrar o texto logo numa fonte reserva e trocar pela verdadeira quando ela chegar, assim ninguém fica olhando para um espaço em branco. A palavra depois da vírgula na sua regra (serif) é essa reserva, e o Google recomenda sempre colocar uma. Use este jeito quando puder editar o HTML da sua página.

Jeito 2: uma linha @import no topo do seu CSS

Às vezes você não consegue mexer no head da página, só no CSS. É o caso da caixa de CSS adicional do WordPress, da seção de CSS de muitos construtores de sites ou de um simples arquivo style.css. Aí o convite pode morar dentro do CSS, numa linha que precisa ficar bem no topo, acima de qualquer outra regra.

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

h1, h2 { font-family: 'Lora', serif; }

É o mais fácil de colar, mas costuma ser um tiquinho mais lento que a tag link, porque o navegador só descobre a fonte depois de ler o seu CSS. Num site pequeno, você mal vai notar.

Jeito 3: hospede os arquivos da fonte você mesmo

Aqui você baixa os arquivos da fonte do Google, sobe para o seu próprio site e aponta para eles, e os navegadores dos seus visitantes nem chegam a contatar o Google. Alguns escolhem isso por privacidade, outros por velocidade, e outros porque as regras sobre o assunto mudam de país para país, então confira o que vale para os seus visitantes. São alguns passos a mais, mas nada difícil: você copia uma pasta e adiciona uma regra dizendo onde o arquivo está.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

As Google Fonts são de código aberto, então você pode baixá-las e hospedá-las, inclusive em projetos comerciais. O demorado é achar e baixar cada arquivo e escrever cada bloco @font-face à mão. O FontMee faz isso por você, como você vai ver já já.

Qual jeito escolher?

• Você pode editar o HTML da página: use a tag link (jeito 1).
• Você só pode editar o CSS, ou usa um construtor de sites com uma caixa de CSS: use @import (jeito 2).
• Você quer que os navegadores dos visitantes carreguem tudo do seu próprio servidor: hospede os arquivos (jeito 3).

Na dúvida, comece pelo jeito 1 ou 2. Dá para trocar depois, e só muda a linha que carrega a fonte.

Pegue o código exato com o FontMee

Digitar essas linhas à mão é onde a maioria dos erros acontece: um sinal de mais esquecido, um peso que a fonte não tem, uma regra que não combina com os seus títulos. O FontMee é uma extensão grátis do Chrome, um pequeno complemento que dá ao navegador uma função nova, e escreve as linhas para você. Primeiro você testa a fonte no seu site de verdade, vê como fica e só então copia o código dessa escolha exata. Tem mais de 1.900 fontes, e o vídeo mostra o painel em ação.

1. Instale o FontMee. Adicione pela Chrome Web Store. É grátis e não pede conta. Clique no ícone de quebra-cabeça do Chrome e fixe a extensão, assim ela fica sempre a um clique.
2. Abra o seu site e clique no ícone do FontMee. O painel abre ao lado da página. Você também pode apertar Alt + Shift + F. As páginas do próprio Chrome (Nova guia, a Web Store, páginas chrome://) não podem ser alteradas.
3. Escolha onde a fonte vai. Em Aplicar mudanças em escolha Tudo, Títulos ou Texto e clique numa fonte. Dá para fazer títulos e texto separadamente.
4. Confira na página de verdade. Alterne entre Fonte original e Prévia do FontMee e use Ajustar para tamanho, peso e altura da linha até ficar bom.
5. Aperte Copiar CSS. Abre uma janela com quatro abas: CSS (o jeito do @import), HTML (o jeito da tag link), Variáveis e Tailwind para quem usa. Escolha a aba que combina com o seu jeito, aperte Copiar para a área de transferência e cole no seu site. O FontMee só pede ao Google os pesos que a fonte realmente tem, então você não fica com um link quebrado.
6. Quer o jeito 3? Na mesma janela, aperte Baixar ZIP para hospedar você mesmo. Você recebe uma pasta com os arquivos da fonte, um fonts.css, um fontmee.css e um README curto. Suba a pasta e adicione os dois links das folhas de estilo.

Quatro coisas para conferir antes de publicar

• Carregue só o que você usa. Cada fonte e peso a mais deixa a página um pouco mais pesada. Duas fontes e dois pesos bastam para a maioria dos sites.
• Tenha uma fonte reserva. Termine cada font-family com um nome genérico como serif ou sans-serif, para o texto ficar bom enquanto a fonte carrega.
• Confira as letras de que você precisa. Acentos como ç, ã e ş, e letras cirílicas ou vietnamitas, não existem em todas as fontes. Veja as suas próprias palavras no FontMee antes de copiar.
• Confira a licença. As Google Fonts são de código aberto e livres para uso comercial. A janela de código do FontMee lista a licença de cada fonte, então você vê antes de publicar.

Ainda não tem um site? Então a fonte vem em segundo lugar. Um site também precisa de uma casa para morar, e um construtor é o jeito mais rápido de ter uma sem código.

Pegue a extensão

O FontMee é grátis, com mais de 1.900 fontes, Copiar CSS em quatro formatos, um ZIP para hospedar você mesmo e o envio das suas próprias fontes. Sem conta, sem assinatura. Adicione pela Chrome Web Store ou leia primeiro a página do FontMee.

Bom saber antes de começar

Perguntas frequentes