Famílias de Fontes e Fontes Seguras para a Web

A propriedade font-family define a família tipográfica de um elemento. Você fornece uma pilha de fontes: uma lista de nomes de fontes separados por vírgulas, da mais preferida à menos preferida, terminando com uma família genérica.

O CSS define cinco famílias genéricas como alternativas:

• serif — fontes com traços decorativos (Times, Georgia)
• sans-serif — fontes limpas, sem traços (Arial, Helvetica)
• monospace — fontes de largura fixa (Courier, Consolas)
• cursive — fontes com estilo de escrita à mão
• fantasy — fontes decorativas para exibição

Fontes compatíveis com a Web vêm pré-instaladas em praticamente todos os sistemas operacionais. Você pode confiar nelas sem carregar um arquivo de fonte externo:

• Sem serifa: Arial, Helvetica, Verdana, Trebuchet MS
• Com serifa: Georgia, Times New Roman
• Monoespaçadas: Courier New, Consolas

Nomes de fontes que contêm espaços devem ser colocados entre aspas:

Monte sua pilha de fontes com:

1. Sua fonte preferida (pode não estar instalada)
2. Uma ou duas alternativas semelhantes
3. Uma família genérica como último recurso

Os designs modernos costumam usar fontes do sistema — a fonte nativa da interface do sistema operacional. Isso proporciona uma aparência nativa e não exige nenhum download:

Editores de código e terminais precisam de uma pilha monoespaçada:

A maioria dos elementos herda font-family do elemento pai. Alguns elementos de formulário (<input>, <textarea>) não herdam essa propriedade por padrão em alguns navegadores — defina-a explicitamente:

Você pode verificar se uma fonte do sistema está disponível usando a função local() dentro de @font-face. Os navegadores tentam usar uma fonte local primeiro, antes de fazer o download.

Ao carregar fontes, use unicode-range em @font-face para carregar apenas os intervalos de caracteres necessários, reduzindo o tamanho do download em sites multilíngues.

Fontes variáveis contêm uma família inteira (pesos, larguras e estilos) em um único arquivo, usando eixos de variação da fonte. Elas reduzem drasticamente o número de requisições HTTP em designs com uso intenso de tipografia.

Qual família genérica de fontes você deve usar como última alternativa para uma pilha de fontes sem serifa?

A propriedade font-family recebe uma pilha de fontes que termina com uma família genérica. As fontes compatíveis com a Web funcionam em qualquer lugar sem precisar ser carregadas. As pilhas de fontes da interface do sistema proporcionam uma aparência nativa sem custo de HTTP. Sempre coloque entre aspas os nomes de fontes que contêm espaços.