buenodc

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 site https://www.cssfontstack.com/. 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.

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).

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:

1
<link rel="preconnect" href="https://fonts.googleapis.com">
2
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

4. Aplicando a fonte no CSS

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

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.

Como adiconar fontes ao seu site