Propriedade CSS font-display

O descritor CSS font-display controla como uma fonte web personalizada se comporta enquanto ainda está sendo baixada: se o navegador exibe texto alternativo imediatamente, oculta o texto até a fonte chegar, ou desiste da fonte completamente. É um descritor usado dentro da regra @font-face — não uma propriedade comum definida em um elemento.

Esta página explica o problema de carregamento que font-display resolve, percorre cada um de seus cinco valores e oferece orientações práticas sobre qual escolher.

Por que font-display existe

Originalmente, a web era limitada a algumas fontes "web-safe" instaladas na máquina do usuário. A regra @font-face mudou isso: você pode enviar seus próprios arquivos de fonte e informar ao navegador onde baixá-los. Mas arquivos de fonte podem ser grandes, e um download leva tempo. Durante esse atraso, o navegador precisa decidir o que renderizar para qualquer texto nessa fonte. Existem dois comportamentos concorrentes:

FOIT — flash of invisible text. O navegador oculta o texto até que a fonte personalizada termine de ser baixada. Em uma conexão lenta, o usuário pode encarar uma página em branco por segundos. Este é o comportamento padrão na maioria dos navegadores.
FOUT — flash of unstyled text. O navegador exibe imediatamente o texto em uma fonte alternativa e, em seguida, o re-renderiza quando a fonte personalizada carrega. O conteúdo fica legível instantaneamente, mas "salta" visivelmente quando a troca acontece.

Nenhum é universalmente melhor, então font-display permite que você diga ao navegador qual compromisso prefere.

Os três períodos de font-display

Cada valor é definido em termos de três períodos de linha do tempo que começam quando a fonte inicia o carregamento:

Período de bloqueio — o texto é renderizado de forma invisível (ainda ocupa espaço). Se a fonte carregar durante esse período, ela é usada. Se o período terminar primeiro, o navegador recorre a uma fonte do sistema.
Período de troca — o texto é exibido em uma fonte alternativa, mas o navegador irá trocar pela fonte personalizada assim que ela terminar de carregar.
Período de falha — o navegador trata o carregamento da fonte como falha e mantém a fonte alternativa, mesmo que a fonte chegue depois.

Cada valor simplesmente escolhe quanto tempo os períodos de bloqueio e troca duram.

Valor inicial	auto
Aplica-se a	Regra `@font-face`.
Herdado	Não.
Animável	Não.
Versão	CSS Fonts Module Level 4
Sintaxe DOM	object.style.fontDisplay = "swap";

Sintaxe

font-display: auto | block | swap | fallback | optional;

Como font-display é um descritor, ele fica dentro de um bloco @font-face junto com font-family e src:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; /* show fallback text immediately, then swap in the font */
}

Em seguida, você usa a fonte normalmente. O descritor é lido automaticamente quando a fonte carrega:

body {
  font-family: 'MyWebFont', Arial, sans-serif;
}

Valores

Valor	Período de bloqueio	Período de troca	O que o usuário vê
`auto`	padrão do navegador	padrão do navegador	O que o navegador preferir — geralmente se comporta como `block`.
`block`	curto (~3 s)	infinito	Texto invisível primeiro, depois a fonte quando chegar (tendência a FOIT).
`swap`	nenhum / mínimo	infinito	Texto alternativo instantaneamente, trocado pela fonte personalizada ao carregar (FOUT).
`fallback`	muito curto (~100 ms)	curto (~3 s)	Texto invisível breve, depois alternativo; a fonte só é usada se carregar rapidamente.
`optional`	muito curto (~100 ms)	nenhum	Alternativo se a fonte não estiver em cache; sem troca que cause deslocamento de layout.

Os comprimentos exatos dos períodos não são fixados pela especificação — cada navegador escolhe os seus próprios. Os valores acima são os padrões comuns usados pelo Chrome e Firefox.

Qual valor escolher?

swap é a escolha mais popular para texto de corpo. O conteúdo fica legível imediatamente, o que é ótimo para acessibilidade e desempenho percebido. A desvantagem é um reflow visível quando a fonte é trocada.
optional é a melhor escolha quando evitar deslocamento de layout importa mais do que garantir que a fonte apareça. O navegador usa a fonte personalizada somente se puder carregá-la quase instantaneamente (tipicamente do cache); caso contrário, mantém o alternativo e nunca faz a troca. Isso mantém sua pontuação de Cumulative Layout Shift baixa.
fallback é um meio-termo: uma breve janela invisível, depois alternativo, com uma chance curta de troca. Bom para fontes que são desejáveis mas não críticas.
block é adequado para fontes de ícones ou branding onde o glifo errado (por exemplo, um caractere alternativo em vez de um ícone) pareceria quebrado — você prefere não mostrar nada a mostrar algo errado.
auto deixa a decisão para o navegador e não lhe dá controle, portanto raramente é a escolha deliberada.

font-display é um descritor, não uma propriedade, portanto as palavras-chave initial e inherit não se aplicam a ele da mesma forma que se aplicam a propriedades CSS regulares.

Suporte a navegadores

font-display é suportado em todos os navegadores modernos (Chrome, Edge, Firefox, Safari e Opera). Em navegadores que não reconhecem uma determinada palavra-chave, o descritor é simplesmente ignorado e o comportamento de carregamento padrão do navegador se aplica, portanto é seguro usar sem um fallback.

Propriedades relacionadas

@font-face — a regra que define uma fonte personalizada e onde font-display reside.
font-family — define qual fonte (incluindo sua pilha de alternativas) um elemento usa.
font-weight — controla quão negrito o texto aparece.
font — o atalho para várias propriedades de fonte de uma vez.

Prática

Quais são os valores possíveis para a propriedade CSS 'font-display'?