Controlar o desempenho de fontes com o font-display

Rob Dodson

Decidir o comportamento de uma fonte da Web durante o carregamento pode ser uma técnica importante de ajuste de performance. O novo descritor de exibição de fontes para @font-face permite que os desenvolvedores decidam como as fontes da Web serão renderizadas (ou substitutas), dependendo do tempo de carregamento.

Diferenças na renderização de fontes atual

Com as fontes da Web, os desenvolvedores podem incorporar uma tipografia avançada nos projetos, mas o navegador vai precisar fazer o download se o usuário ainda não tiver uma família tipográfica. Como as redes podem ser instáveis, esse tempo de download pode afetar negativamente a experiência do usuário. Afinal, ninguém vai se importar com a beleza do seu texto se levar muito tempo para ele ser mostrado.

Para reduzir parte do risco de um download de fonte lento, a maioria dos navegadores implementa um tempo limite após o qual uma fonte substituta será usada. Essa é uma técnica útil, mas, infelizmente, os navegadores diferem na implementação real.

• O Chrome e o Firefox têm um tempo limite de três segundos. Depois disso, o texto é exibido com a fonte substituta. Se o download da fonte for concluído, ocorrerá uma troca e o texto será renderizado novamente com a fonte pretendida.
• O Internet Explorer tem um tempo limite de zero segundo, o que resulta na renderização imediata do texto. Se a fonte solicitada ainda não estiver disponível, um substituto vai ser usado, e o texto será renderizado novamente depois, quando a fonte solicitada estiver disponível.
• O Safari não tem comportamento de tempo limite, ou pelo menos nada além de um tempo limite de rede de referência.

Para piorar, os desenvolvedores têm controle limitado para decidir como essas regras vão afetar o aplicativo deles. Um desenvolvedor focado em performance pode preferir ter uma experiência inicial mais rápida que use uma fonte substituta e só aproveitar a melhor fonte da Web em visitas subsequentes, depois de fazer o download. Com o uso de ferramentas como a API Font Load, é possível substituir alguns dos comportamentos padrão do navegador e melhorar a performance, mas isso gera a necessidade de gravar quantidades não triviais de JavaScript que precisam ser in-line na página ou solicitadas por um arquivo externo, o que gera mais latência HTTP.

Para ajudar a solucionar essa situação, o grupo de trabalho de CSS propôs um novo descritor @font-face, font-display, e uma propriedade correspondente para controlar como uma fonte disponível para download é renderizada antes de ser totalmente carregada.

Linhas do tempo de download de fontes

Assim como os comportamentos de tempo limite de fonte que alguns navegadores implementam hoje, o font-display segmenta o ciclo de vida de um download de fonte em três períodos principais.

1. O primeiro é o período de bloqueio da fonte. Durante esse período, se o tipo de fonte não for carregado, qualquer elemento que tentar usá-lo vai precisar renderizar um tipo de fonte substituta invisível. Se o tipo de fonte for carregado corretamente durante o período de bloqueio, ele vai ser usado normalmente.
2. O período de troca da fonte ocorre imediatamente após o período de bloqueio da fonte. Durante esse período, se o tipo de fonte não é carregado, qualquer elemento que tentar usá-lo precisa renderizar um tipo de fonte substituta. Se o tipo de fonte for carregado durante o período de troca, ele vai ser usado normalmente.
3. O período de falha da fonte ocorre imediatamente após o período de troca da fonte. Se o tipo de fonte ainda não tiver sido carregado quando esse período começar, ele será marcado como uma falha no carregamento, causando um substituto de fonte normal. Caso contrário, o tipo de fonte será usado normalmente.

Entender esses períodos significa que você pode usar font-display para decidir como sua fonte precisa ser renderizada, dependendo se foi ou não baixada.

Qual exibição de fonte é ideal para você?

Para trabalhar com o descritor font-display, adicione-o ao seu @font-face em-rules:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

No momento, font-display é compatível com o seguinte intervalo de valores: auto | block | swap | fallback | optional.

automático

auto usa a estratégia de exibição de fonte utilizada pelo user agent. Atualmente, a maioria dos navegadores tem uma estratégia padrão semelhante a block.

block

block dá ao tipo de fonte um curto período de bloqueio (três segundos é o recomendado na maioria dos casos) e um período de troca infinito. Em outras palavras, o navegador desenha um texto "invisível" inicialmente se a fonte não está carregada, mas troca o tipo de fonte assim que ela é carregada. Para fazer isso, o navegador cria um tipo de fonte anônimo com métricas semelhantes às da fonte selecionada, mas com todos os glifos sem "tinta". Esse valor só deverá ser usado se a renderização de texto em uma família tipográfica específica for necessária para que a página seja utilizável.

trocar

swap dá ao tipo de fonte um período de bloqueio de zero segundo e um período de troca infinito. Isso significa que o navegador vai renderizar o texto imediatamente com um substituto caso o tipo de fonte não tenha sido carregado, mas vai trocá-lo assim que ele for carregado. Semelhante a block, esse valor só deverá ser usado quando a renderização de texto em uma fonte específica for importante para a página, mas a renderização em qualquer fonte ainda receberá uma mensagem correta. O texto do logotipo é um bom candidato para troca, já que a exibição do nome de uma empresa usando um substituto razoável transmitirá a mensagem, mas em algum momento você usaria a família tipográfica oficial.

fallback

fallback fornece ao tipo de fonte um período de bloqueio extremamente pequeno (100 ms ou menos é recomendado na maioria dos casos) e um curto período de troca (três segundos é o recomendado na maioria dos casos). Em outras palavras, o tipo de fonte vai ser renderizado com um substituto inicial se não tiver sido carregado, mas a fonte vai ser trocada assim que for carregada. No entanto, se passar muito tempo, o substituto será usado pelo restante do ciclo de vida da página. O fallback é um bom candidato para itens como corpo de texto, em que você deseja que o usuário comece a ler o mais rápido possível e não queira perturbar a experiência ao deslocar o texto enquanto uma nova fonte é carregada.

opcional

opcional dá ao tipo de fonte um período de bloqueio extremamente pequeno (100 ms ou menos é recomendado na maioria dos casos) e um período de troca de zero segundo. Assim como no substituto, essa é uma boa opção para quando o download da fonte for mais "bom de ter", mas não essencial para a experiência. O valor opcional cabe ao navegador decidir se o download da fonte será iniciado, o que ele pode escolher não fazer ou pode fazer com uma prioridade baixa, dependendo do que ele acha que é melhor para o usuário. Isso pode ser benéfico em situações em que o usuário está com uma conexão fraca e puxar uma fonte pode não ser o melhor uso dos recursos.

Suporte ao navegador

No momento, font-display está atrás da sinalização "Recursos experimentais da plataforma da Web" no Chrome 49 para computadores e está disponível no Opera e no Opera para Android.

Demonstração

Confira esta amostra para testar font-display. Para desenvolvedores focados em desempenho, ela pode ser mais uma ferramenta útil em sua caixa de ferramentas.