# font-display: controle de exibição de fontes para ajuste em performance
> Font-display: otimize carregamento de fontes web drasticamente. Controle exibição durante download e melhore performance com swap, fallback e optional. Use!
URL: https://dpw.dev/css/font-display-controle-de-exibicao-de-fontes-para-ajuste-em-performance/
Publicado em: 2019-05-27
Categoria: css
Tags: performance, tipografia, web-design
Autor: Tárcio Zemel
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.
> Artigo baseado em [Font-display](https://font-display.glitch.me/).
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](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#webfonts_and_the_critical_rendering_path).
Mas, para apenas entender o básico, existem 3 fases no processo de renderização de fontes na Web:
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](https://developer.mozilla.org/pt-BR/docs/Web/CSS/@font-face/font-display#Browser_compatibility) para obter as informações mais recentes.
`font-display` é controlado por `@font-face`:
```scss
@font-face {
font-family: 'my-font';
font-display: optional;
src: url(my-font.woff2) format('woff2');
}
```
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).
> **Nota:** citado depende de qual navegador você está usando. Chrome, Firefox e (recentemente) o Safari usam 3s. O IE usa 0s (efetivamente sem período de bloqueio) e o Safari mais antigo não usa timeout, tendo efetivamente um período de bloqueio infinito.
### 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:
## 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.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml