font-display: controle de exibição de fontes para ajuste em performance

Conheça font-display, a nova propriedade CSS font face para ajuste fino de carregamento/exibição de fontes para aprimoramento da performance em sites!

Ir para o artigo

Uma boa novidade em relação à performance na Web é a chegada da nova propriedade font-display, que determina como uma fonte personalizada (font face) é exibida com base em se e quando ela é baixada e está pronta para uso.

Conheça mais sobre font-display e saiba como usar cada um de seus valores possíveis a seu favor, aprimorando a experiência de seus visitantes ao proporcionar sensação de performance aprimorada.

Como web fonts são renderizadas pelo navegador

Antes de entrar propriamente no assunto font-display, cabe uma explicação sobre o tempo de vida de uma web font.

Para uma explicação super detalhada de onde as web fonts se encaixam no processo de renderização do navegador, Ilya Grigorik tem um post incrível sobre otimização de fontes na web.

Mas, para apenas entender o básico, existem 3 fases no processo de renderização de fontes na Web:

font-display: diagrama com passos de renderização de web fonts.
Fases de renderização de uma web font

Durante a fase Block (período de bloqueio), o navegador renderiza o texto em uma fonte invisível. É por isso que, em muitos sites com fontes pesadas, durante o primeiro carregamento da página você não vê texto — ou vê phantom underlines (os “sublinhados-fantasma”).

Na fase Swap (período de troca), o browser renderiza o texto na fonte de fallback — no exemplo no diagrama, essa seria a fonte serif padrão.

Em Fail (possível período de falha), nenhuma fonte foi encontrada e, nesse caso, o navegador renderiza o texto na fonte fallback, como mostrado acima.

A nova propriedade font-display

A nova propriedade font-display torna possível controlar o tamanho de cada um desses períodos e o que acontece quando algum deles falha.

Existem 4 valores diferentes: block, swap, fallback e optional — há também auto, que geralmente acaba sendo o mesmo que block.

Esses valores são suportados em todos os navegadores modernos (IE não incluso), mas é sempre bom verificar a tabela de compatibilidade para obter as informações mais recentes.

font-display é controlado por @font-face:

Inclusive, se for usar Google Fonts, é possível controlar o carregamento da fonte usando o parâmetro de URL display:

Valores possíveis de font-display

Como visto, cada um dos 4 valores possíveis de font-display acarreta em consequências que você pode usar estrategicamente a seu favor.

A seguir, veja mais detalhes sobre cada um dos valores possíveis da propriedade: block, swap, fallback e optional.

font-display: block

Usando font-display: block, o texto é “bloqueado” (fica invisível) por um breve período.

Em seguida, se a fonte personalizada ainda não tiver sido baixada, o navegador trocará (renderizará o texto na fonte de fallback) por quanto tempo a fonte personalizada for baixada e vai renderizar novamente o texto na fonte personalizada.

Acontece um FOIT (flash of invisible text ou período de texto invisível).

font-display: swap

Com font-display: swap, não há período de bloqueio (portanto, nenhum texto invisível) e o texto é mostrado imediatamente na fonte de fallback até que a fonte personalizada seja carregada e, então, ela é trocada com a fonte personalizada.

Acontece um FOUT (flash of unstyled text ou período de texto não estilizado).

font-display: fallback

Considere font-display: fallback como um intermediário entre block e swap.

O texto fica invisível por um curto período de tempo (100ms); em seguida, se a fonte personalizada não tiver sido baixada, o texto será mostrado em uma fonte de fallback (por cerca de 3s) para, logo depois, ser trocado depois de a fonte personalizada ter sido baixada.

font-display: optional

Isso se comporta como um fallback, em que apenas o navegador pode decidir não usar a fonte personalizada com base na velocidade de conexão do visitante.

Em velocidade de 3G ou menor, levará uma eternidade para baixar a fonte personalizada e fazer a troca depois do download acontecerá muito tempo depois, o que é extremamente irritante.

É mais ou menos assim:

font-display: comparativo de velocidade usando diferentes valores para font-display

Qual valor usar para font-display?

Antes as diversas opções e seus respectivos comportamentos, qual valor usar para font-display?

Isso depende muito de como você está usando web fonts e se renderizar o texto em uma fonte de fallback faz sentido.

Por exemplo, se você renderizar o texto principal de um site, faz sentido usar font-display: optional. Nos navegadores que o implementam (todos os navegadores modernos da data de publicação deste artigo), a experiência será muito mais agradável: os visitantes receberão conteúdo rápido e, se o download da fonte da web demorar muito, não acontecerá um relayout da página no meio da navegação.

Se você estiver usando uma fonte para ícones, não há fonte de fallback aceitável na qual você possa renderizá-los, então a única opção seria bloquear completamente até que a fonte esteja pronta, com font-display: block.

Na verdade, não há “regra de ouro” a ser usada: ficamos com o bom e velho depende.

O que você deve fazer é entender para o que serve cada valor de font-display para saber quando usar um ou outro; para conseguir fazer esse controle fino de fontes conforme cada caso em particular.

E-book com 10 dicas para montar seu portfolio altamente eficiente e conseguir muito mais clientes e projetos!

Download GRÁTIS