Fonts no CSS

Tempo de leitura: 4 minutos

Fonts no CSS: A tipografia é a espinha dorsal de qualquer conteúdo web. Mais do que apenas estética, a escolha e a estilização das fontes afetam a legibilidade, a hierarquia da informação e, em última análise, a experiência do usuário. O CSS oferece um controle granular sobre cada aspecto do texto.

Neste artigo, vamos mergulhar nas propriedades essenciais da família font, entender a melhor forma de usar unidades e como importar fontes personalizadas com a regra @font-face.

1. As Propriedades Fundamentais de `font`

O CSS permite ajustar individualmente as características mais importantes da fonte:

Propriedade	Função	Valor Recomendado	Notas
`font-family`	Define a(s) fonte(s) a ser(em) usada(s).	Lista de fontes (ex: `'Roboto', sans-serif`)	Deve sempre terminar com uma fonte genérica (`serif`, `sans-serif`) como fallback.
`font-size`	Define o tamanho do texto.	Unidades relativas (`rem`, `em`, `vw`).	Use `rem` para acessibilidade e escalabilidade.
`font-weight`	Define a espessura da fonte.	`normal` (400), `bold` (700), `900`	Depende dos pesos que a fonte instalada ou importada suporta.
`font-style`	Define o estilo da fonte.	`normal`, `italic`, `oblique`	`italic` é o mais comum, baseado na versão itálica da fonte.
`line-height`	Define o espaçamento entre linhas.	Valor sem unidade (ex: `1.6`)	Melhor Prática: Valores sem unidade são relativos ao `font-size` do próprio elemento, garantindo a herança correta.

✏️ A Propriedade `font` (Shorthand)

Para concisão, a maioria das propriedades de fonte pode ser combinada na propriedade shorthand font:

CSS

/* Sintaxe: font-style font-weight font-size/line-height font-family */

p {
  font: italic bold 1rem/1.6 'Helvetica Neue', sans-serif;
}
/* Isto define: font-style: italic; font-weight: bold; font-size: 1rem; line-height: 1.6; font-family: 'Helvetica Neue', sans-serif; */

Nota: É obrigatório que o font-size e o font-family estejam presentes no shorthand.

2. Fontes Web e a Regra `@font-face`

Para usar uma fonte que não está instalada no sistema do usuário (uma fonte personalizada), você deve primeiro carregá-la usando a regra @font-face.

Otimização e Prioridade

Ao importar fontes, você deve listar vários formatos de arquivo. Os navegadores modernos suportam amplamente o WOFF2, que oferece a melhor compressão.

CSS

@font-face {
  font-family: 'MinhaFontePersonalizada';
  src: url('minhafonte.woff2') format('woff2'), /* 1. Prioridade: WOFF2 (menor) */
       url('minhafonte.woff') format('woff');  /* 2. Fallback: WOFF */
  font-weight: 400; /* Define o peso específico desta variação */
  font-style: normal;
}

/* Agora a fonte pode ser usada */
h1 {
  font-family: 'MinhaFontePersonalizada', sans-serif;
}

🌐 Fontes Genéricas (`font-family`)

Sua declaração font-family deve sempre terminar com uma fonte genérica para garantir que o texto seja renderizado mesmo que nenhuma fonte específica seja encontrada:

serif: Fontes com traços (ex: Georgia)
sans-serif: Fontes sem traços (ex: Arial)
monospace: Caracteres de largura fixa (ex: Courier New)
cursive, fantasy

3. Acessibilidade e Responsividade da Tipografia

A. Acessibilidade (`rem`)

Como visto no artigo sobre Unidades CSS, usar rem para font-size é a melhor prática para acessibilidade. Ele permite que o texto escale uniformemente com a configuração de tamanho de fonte padrão do usuário no navegador, sem quebrar o layout.

B. Otimização de Performance

O carregamento de fontes personalizadas pode atrasar a renderização da página (o chamado “Flash de Texto Invisível” – FOUT ou FOIT).

font-display: Adicione esta propriedade na sua regra @font-face para controlar o comportamento de download da fonte:CSS@font-face { /* ... */ font-display: swap; /* Mostra o texto com uma fonte padrão primeiro, depois troca */ } O valor swap é geralmente o mais recomendado, pois prioriza a exibição imediata do conteúdo, mesmo que temporariamente com a fonte padrão.

✅ Conclusão Fonts no CSS

A tipografia é fundamental para a comunicação em seu site. Ao dominar as propriedades font-*, utilizar a sintaxe shorthand para concisão e empregar rem e um line-height sem unidade para escalabilidade, você garante um texto legível, acessível e alinhado à identidade visual do seu projeto. Lembre-se de otimizar o carregamento de fontes web para não comprometer o desempenho.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: