Como adicionar fontes ao seu site

As fontes são um pilar fundamental no design de uma página, influenciando tanto a estética quanto a usabilidade de uma aplicação. Para fazer a utilização de uma fonte, os desenvolvedores dispõem de três estratégias principais: 1) Fontes seguras da Web; 2) Repositórios de fontes externos e 3) Fontes auto-hospedadas.

1. Fontes seguras da Web

São as fontes que vem pré-instaladas na maioria dos sistemas operacionais, tais como Arial, Verdana ou Times New Roman. São a opção mais rápida, porém com pouca variedade. Você pode consulta uma lista de fontes seguras no CSS Font Stack. Essas fontes

2. Repositórios de fontes externos

São serviços oferecidos por empresas para hospedar e disponibilizar fontes. Exemplos mais comuns são Google Fonts, Adobe Fonts e Bunny Fonts, que oferecem milhares de fontes. Essa é uma das soluções mais comuns utilizadas por desenvolvedores.

Utilizar fontes sem verificar sua procedência e direitos autorais pode resultar em graves consequências, por isso, sempre verifique os termos de licença.

Utilizando o Google Fonts

1. Escolhendo a fonte

Acesse fonts.google.com e busque a fonte desejada. Você pode procurar a fonte de três maneiras como indicado na figura abaixo: 1) Digitando o nome da fonte; 2) Ordenando a lista de fontes pelos filtros: trending (tendência), most popular (mais popular), newest (mais recente) e name (order alfabética do nome) e 3) Clicando no botão Filters, uma seção ao lado esquerdo vai abrir em que você pode procurar a fonte pela seu grupo, sendo eles: Language (idioma), Feeling (sensação), Appearance (Aparência), Calligraphy (Caligrafia), Serif (Serifa), Sans Serif (Sem Serifa), Technology (Tecnologia) e Seasonal (Sazonal).

👉 Dica: Evite usar mais de 2–3 fontes diferentes no mesmo site!

2. Selecionando a fonte

Após escolher a fonte clique nela e logo em seguida clique no botão Get Font que deve aparecer no lado superior direito da sua tela conforme mostrado abaixo:

3. Adicionando ao HTML (Método Recomendado)

Na página da fonte, clique no botão Get embed code e depois copie o código <link> gerado pelo Google 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">

• rel="preconnect" acelera o carregamento.
• display=swap evita que o texto fique invisível durante o carregamento.

4. Aplicando a fonte no CSS

Defina a font-family nos seus seletores:

body {
  font-family: "Roboto", sans-serif; /* "sans-serif" é fallback */
}

3. Fontes auto-hospedadas

São arquivos de fonte baixados e vinculados via @font-face no CSS. Oferecem controle total e independência de terceiros, essencial para marcas com identidade tipográfica exclusiva.

Combinações de fontes

Escolher fontes que se complementam é essencial para um design equilibrado. Uma combinação clássica é usar uma fonte sem serifa para títulos com uma serifada para textos longos, criando contraste visual sem comprometer a legibilidade. Para evitar poluição visual, limite-se a duas famílias tipográficas diferentes por projeto e priorize hierarquia clara entre elementos.

O site Guia de Pairing de Fontes traz combinações testadas de fontes para títulos e corpo do texto que você pode utilizar de referência.