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:
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:
|
1 2 3 4 5 |
@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:
|
1 |
<link href="https://fonts.googleapis.com/css?family=Roboto&display=optional" rel="stylesheet"> |
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:
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.