2 de junho de 2025Atualizado em 25 de outubro de 202610 min de leitura

Como adicionar fontes ao seu site

Uma fonte bem escolhida deixa o texto fácil de ler em qualquer tela e dá personalidade ao site. Para usar uma fonte, o navegador precisa ter o arquivo dela, e existem três lugares de onde esse arquivo pode vir.

Este tutorial mostra os três caminhos e termina com um exemplo completo.

Antes de começar: alguns termos

• Família é o nome da fonte, como Roboto ou Georgia. Uma família tem vários pesos (do fino ao grosso) e, às vezes, a versão itálica.
• Peso é a espessura da letra, escrita como número de 100 a 900. O texto normal costuma ser 400 e o negrito, 700.
• Serifa é o pequeno traço na ponta das letras, como nas fontes de jornal. Fontes com serifa (serif) têm esses traços, fontes sem serifa (sans-serif) não têm, e fontes monoespaçadas (monospace) dão a mesma largura a todas as letras, como num editor de código.
• Fonte de reserva (fallback) é a fonte que o navegador usa quando não consegue usar a que você pediu.

No CSS, a fonte é escolhida pela propriedade font-family, com uma lista de opções separadas por vírgula:

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

O navegador tenta a primeira fonte da lista. Se ela não estiver disponível, passa para a próxima, e assim por diante. A última opção é sempre uma família genérica (serif, sans-serif ou monospace), que todo navegador tem. Essa lista se chama pilha de fontes (font stack). Nomes com espaço vão entre aspas, como "Times New Roman".

1. Fontes do sistema

Todo sistema operacional já vem com algumas fontes instaladas. Elas são as mais rápidas, porque o navegador não precisa baixar nada: o arquivo já está no computador da pessoa.

A dificuldade é que cada sistema tem as suas. A Arial existe no Windows e no Mac, mas não em todo Linux. Por isso, com fontes do sistema, a pilha de fontes é obrigatória: você lista uma fonte de cada sistema e termina com a família genérica. Três pilhas prontas, que funcionam bem na maioria dos computadores:

/* Sem serifa: usa a fonte padrão da interface de cada sistema. */
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

/* Com serifa. */
font-family: Georgia, "Times New Roman", serif;

/* Monoespaçada, para código. */
font-family: ui-monospace, Consolas, "Courier New", monospace;

O system-ui faz a página usar a mesma fonte dos menus e das janelas do sistema: Segoe UI no Windows, San Francisco no Mac e no iPhone, Roboto no Android. O site fica com cara de aplicativo nativo e não pesa nada a mais.

Para ir além dessas três, o Modern Font Stacks reúne pilhas de fontes do sistema organizadas pelo estilo da letra, cada uma com uma prévia e o CSS pronto para copiar. Com ele, dá para ter um visual mais marcante sem baixar nenhuma fonte.

2. Serviços de fontes

Serviços como o Google Fonts, o Bunny Fonts e o Adobe Fonts guardam milhares de fontes e entregam o arquivo pela internet. Você coloca um link no HTML, e o navegador de cada visitante baixa a fonte do servidor do serviço. O Google Fonts é o mais usado, e as fontes dele são gratuitas.

Utilizando o Google Fonts

1. Escolha a fonte

Acesse o Google Fonts e procure a fonte. Há três formas de procurar, indicadas na figura abaixo: digitando o nome da fonte, ordenando a lista (por tendência, popularidade, novidade ou nome) ou abrindo os filtros (botão Filters) para buscar por idioma, estilo e categoria, como serifa, sem serifa ou caligrafia.

2. Selecione a fonte

Clique na fonte escolhida e, em seguida, no botão Get Font, no canto superior direito da tela:

3. Adicione o link no HTML

Clique em Get embed code, copie o código <link> gerado e cole no <head> do seu HTML:

<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:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

Cada parte desse código tem uma função:

• Os dois rel="preconnect" mandam o navegador abrir a conexão com os servidores do Google logo no começo, antes de precisar da fonte. Isso adianta o download.
• O terceiro <link> carrega um arquivo CSS do Google. No endereço, family=Roboto é a fonte, wght@ lista os pesos e ital pede também o itálico. O trecho 100..900 é um intervalo: com ele, a página pode usar qualquer peso de 100 a 900.
• O display=swap mostra o texto numa fonte de reserva enquanto a fonte escolhida carrega, em vez de deixar o texto invisível.

4. Aplique a fonte no CSS

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

O sans-serif no fim é a fonte de reserva, usada se o Google Fonts não carregar.

3. Fontes auto-hospedadas

Aqui o arquivo da fonte fica no seu próprio projeto, junto com o HTML e o CSS. Você baixa a fonte uma vez, coloca numa pasta e declara no CSS onde ela está. O site passa a não depender de outro serviço: funciona até sem internet, num servidor da escola, por exemplo.

Também é uma questão de privacidade. Quando a fonte vem do Google Fonts, o navegador de cada visitante se conecta aos servidores do Google, que recebem o endereço IP de quem acessou o seu site. Com a fonte hospedada no próprio site, essa conexão não acontece.

O formato WOFF2

Fontes vêm em vários formatos de arquivo. Para sites, use o WOFF2 (Web Open Font Format 2): ele foi feito para a web, é comprimido (bem menor que um .ttf) e funciona em todos os navegadores atuais.

O botão de download do Google Fonts entrega arquivos .ttf, maiores. O google-webfonts-helper entrega as mesmas fontes já em WOFF2: escolha a fonte, marque os pesos que vai usar e baixe o arquivo compactado.

Declarando a fonte com @font-face

A regra @font-face diz ao navegador o nome da fonte e onde está o arquivo. Ela vem no começo do CSS, uma vez para cada peso:

@font-face {
  font-family: "Merriweather";
  src: url("fonts/merriweather-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("fonts/merriweather-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Merriweather", Georgia, serif;
}

• font-family é o nome que você vai usar no resto do CSS. Pode ser qualquer nome, mas o da própria fonte evita confusão.
• src é o caminho do arquivo, relativo ao arquivo CSS.
• font-weight diz qual peso aquele arquivo tem. Com as duas regras, um <strong> usa o arquivo de peso 700 e o texto normal, o de 400.
• font-display: swap tem o mesmo papel do display=swap do Google Fonts.

Algumas fontes são variáveis: um único arquivo guarda todos os pesos. Nesse caso, basta uma regra, com o intervalo de pesos no font-weight, por exemplo font-weight: 100 900;.

Quando usar cada jeito

Para começar um projeto ou testar fontes, o Google Fonts é o caminho mais prático. Quando o visual estiver decidido, levar as fontes para dentro do projeto deixa o site independente e mais respeitoso com a privacidade de quem visita. Se a identidade do site não depende de uma fonte específica, as fontes do sistema dão o melhor resultado em velocidade.

Combinando fontes

Uma combinação clássica é usar uma fonte sem serifa nos títulos e uma com serifa nos textos longos. O contraste ajuda a pessoa a distinguir títulos de texto, e a serifa facilita a leitura de parágrafos compridos. A combinação inversa, serifa nos títulos e sem serifa no texto, também funciona bem.

Use no máximo duas famílias por site. Para criar hierarquia, varie o tamanho e o peso de uma mesma família, em vez de acrescentar uma terceira. O Font Pair reúne combinações do Google Fonts testadas para títulos e texto, e é uma boa referência para escolher.

Exemplo do zero

Uma página de receita com títulos em Inter (sem serifa) e texto em Merriweather (com serifa). Primeiro com o Google Fonts, depois com as fontes dentro do projeto.

1. Versão com Google Fonts

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bolo de cenoura</title>
    <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=Inter:[email protected]&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Bolo de cenoura</h1>
    <p>Um bolo fofinho, com <strong>cobertura de chocolate</strong>, que fica pronto em <em>menos de uma hora</em>.</p>

    <h2>Ingredientes</h2>
    <ul>
      <li>3 cenouras médias</li>
      <li>3 ovos</li>
      <li>2 xícaras de farinha de trigo</li>
    </ul>
  </body>
</html>

Repare que um único <link> carrega as duas fontes: cada fonte entra com um family= separado por &. A Merriweather vem com o normal (0,400), o negrito (0,700) e o itálico (1,400), porque o texto usa <strong> e <em>.

body {
  max-width: 38rem;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: "Merriweather", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
}

h1,
h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

Cada pilha termina numa fonte do sistema parecida e na família genérica. Se o Google Fonts falhar, a página continua legível e com o mesmo estilo geral.

2. Versão com as fontes no projeto

No google-webfonts-helper, baixe a Inter (peso 700) e a Merriweather (pesos 400, 700 e itálico 400) em WOFF2. Renomeie os arquivos com nomes curtos e coloque numa pasta fonts:

receita/
├── fonts/
│   ├── inter-700.woff2
│   ├── merriweather-400.woff2
│   ├── merriweather-400-italic.woff2
│   └── merriweather-700.woff2
├── index.html
└── style.css

No index.html, apague os três <link> do Google Fonts e deixe só o do style.css. No começo do style.css, declare cada arquivo:

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("fonts/merriweather-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("fonts/merriweather-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("fonts/merriweather-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* O resto do CSS continua igual ao da versão anterior. */

O resto do CSS não muda: os nomes "Inter" e "Merriweather" agora apontam para os arquivos do projeto, e não mais para o Google.

3. Teste

Abra a página no navegador e confira se os títulos e o texto aparecem com fontes diferentes. Para ter certeza de que a fonte carregou, abra as ferramentas de desenvolvedor (F12), clique com o botão direito num parágrafo, escolha “Inspecionar” e abra a aba Computado (Computed). No fim dela, a seção “Rendered Fonts” mostra a fonte que o navegador realmente usou. Se aparecer Georgia em vez de Merriweather, o arquivo não carregou: confira o caminho no src e o nome do arquivo na pasta.