Propriedade CSS font-family
A propriedade CSS font-family define nomes de família de fontes ou nomes de família genérica para o elemento selecionado. Veja exemplos.
A propriedade CSS font-family define qual tipo de letra é usado para renderizar o texto. Você fornece uma lista priorizada de fontes, e o navegador percorre essa lista da esquerda para a direita, usando a primeira que encontrar no dispositivo do usuário.
Esta página explica como a pilha de fontes funciona, a diferença entre famílias específicas e genéricas, como construir uma lista de fallback confiável e os cuidados com aspas e correspondência por caractere.
Como a pilha de fontes funciona
Os valores são separados por vírgulas, e o navegador os trata como alternativas — não como uma fonte combinada. Ele usa a primeira fonte da lista que estiver disponível e para:
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;Aqui o navegador tenta "Segoe UI" primeiro. Se não estiver instalada, tenta Roboto, depois Helvetica, depois Arial, e por fim o genérico sans-serif, que o navegador sempre satisfaz com uma de suas fontes integradas. Por isso a pilha de fontes deve sempre terminar com uma família genérica — isso garante que o texto seja renderizado de forma aceitável mesmo em um dispositivo que não possua nenhuma das suas fontes preferidas.
Os dois tipos de nome de fonte
Existem dois tipos de valor que você pode listar, e uma boa pilha combina ambos:
family-name— o nome de um tipo de letra específico, como"Times New Roman",CourierouArial. Liste estes primeiro porque são as fontes que você realmente deseja.generic-family— uma palavra-chave de categoria que o navegador mapeia para uma fonte integrada adequada. Liste um deles por último como fallback final. As famílias genéricas padrão são:
| Família genérica | Aparência típica | Exemplos de fontes |
|---|---|---|
serif | Letras com pequenos traços ("serifas") | Times New Roman, Georgia |
sans-serif | Limpa, sem traços — comum para UI/corpo de texto | Arial, Helvetica |
monospace | Todos os caracteres com a mesma largura — para código | Courier New, Consolas |
cursive | Estilo de escrita à mão / script | Brush Script, Comic Sans |
fantasy | Estilo decorativo de exibição | Impact, Papyrus |
system-ui | A fonte nativa de UI do dispositivo | San Francisco, Segoe UI |
Uso de aspas nos nomes de fontes
Quando o nome de uma fonte contém espaços em branco (ou pode ser confundido com uma palavra-chave), envolva-o entre aspas:
/* Multi-word names need quotes */
font-family: "Courier New", "Lucida Console", monospace;
/* Single-word names don't, but quotes are still valid */
font-family: Georgia, serif;Nunca coloque aspas em torno da palavra-chave de família genérica — "sans-serif" seria lido como uma fonte literalmente chamada "sans-serif", e não como a categoria genérica.
Fallback por caractere
A seleção de fonte não para na primeira fonte disponível para todo o texto — ela acontece um caractere por vez. Se a fonte correspondente não possui um glifo para um caractere específico (como um emoji ou uma letra não-latina), o navegador continua percorrendo a lista em busca de uma fonte que tenha esse glifo. É por isso que manter uma família genérica ampla no final ajuda com conteúdo multilíngue ou rico em símbolos.
Para carregar e usar uma fonte personalizada que não está instalada no dispositivo do usuário, defina-a com a regra @font-face e depois referencie seu nome em font-family.
| Valor inicial | serif |
|---|---|
| Aplicável a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.fontFamily = "Verdana, sans-serif"; |
Sintaxe
Sintaxe da propriedade CSS font-family
font-family: family-name | generic-family | initial | inherit;Exemplo da propriedade font-family:
Exemplo da propriedade CSS font-family com o valor sans-serif
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font-family property example</h2>
<p>We used "Lucida Grande" font-family for this text.</p>
</body>
</html>A pilha acima solicita "Lucida Sans Unicode", recorre a "Lucida Grande" (o equivalente no macOS) e, por fim, ao que o navegador usar para sans-serif — assim o parágrafo permanece legível em qualquer lugar.
Construindo uma pilha de fontes robusta
Uma pilha prática lista, em ordem: sua fonte ideal, uma ou duas alternativas amplamente instaladas com aparência similar, e uma família genérica para fechar. Uma "pilha de fontes do sistema" comum que usa a face nativa de UI de cada plataforma tem esta aparência:
body {
font-family: -apple-system, system-ui, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}Isso renderiza San Francisco em dispositivos Apple, Segoe UI no Windows e Roboto no Android — sem nenhuma web font para baixar.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| family-name, generic-family | Lista priorizada de nomes de família de fontes e/ou nomes de família genérica. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do seu elemento pai. | Experimente » |
Propriedades relacionadas
font-family normalmente é definida junto com as outras propriedades de fonte, ou todas de uma vez com o atalho font:
- font-size — o tamanho do texto.
- font-weight — o negrito do texto.
- font-style — itálico ou normal.
- @font-face — carrega uma web font personalizada para referenciar aqui.