Controlar o desempenho de fontes com o font-display

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 vão ser renderizadas (ou substitutas), dependendo do tempo de carregamento delas.

Diferenças na renderização de fontes atualmente

O Web Fonts oferece aos desenvolvedores a capacidade de incorporar tipografia rica nos projetos, com a desvantagem de que, se o usuário ainda não tiver uma tipografia, o navegador precisará passar algum tempo fazendo o download. 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 ele demorar muito tempo para ser exibido.

Para reduzir o risco de um download de fonte lento, a maioria dos navegadores implementa um tempo limite. Depois disso, uma fonte substituta é usada. Essa é uma técnica útil, mas, infelizmente, os navegadores diferem na implementação real.

Navegador	Tempo limite	Fallback	Trocar
Chrome 35 ou mais recente	3 segundos	Sim	Sim
Opera	3 segundos	Sim	Sim
Firefox	3 segundos	Sim	Sim
Internet Explorer	0 segundo	Sim	Sim
Safari	Sem tempo limite	N/A	N/A

• O Chrome e o Firefox têm um tempo limite de três segundos. Depois disso, o texto é mostrado com a fonte substituta. Se a fonte conseguir fazer o download, 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 em renderização imediata do texto. Se a fonte solicitada ainda não estiver disponível, um substituto vai ser usado, e o texto vai ser renderizado novamente mais tarde, quando a fonte solicitada ficar 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 afetarão o aplicativo. Um desenvolvedor com foco em performance pode preferir ter uma experiência inicial mais rápida usando uma fonte substituta e só usar a fonte da Web mais agradável em acessos subsequentes depois que ela tiver a chance de fazer o download. Com ferramentas como a API Font Loading, pode ser possível substituir alguns dos comportamentos padrão do navegador e ter ganhos de desempenho. No entanto, é necessário escrever quantidades não triviais de JavaScript que precisam ser in-line na página ou solicitadas em um arquivo externo, o que gera mais latência de HTTP.

Para ajudar a resolver essa situação, o grupo de trabalho do 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

Semelhante aos comportamentos de tempo limite de fonte que alguns navegadores implementam atualmente, 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 da fonte não é carregado, qualquer elemento que tente usá-lo precisa ser renderizado com um tipo de fonte substituto invisível. Se o tipo de fonte for carregado com êxito durante o período de bloqueio, ele 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 for carregado, qualquer elemento que tentar usá-lo precisará ser renderizado com um tipo de fonte substituto. 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 vai ser marcado como um carregamento com falha, causando um substituto normal da fonte. Caso contrário, o tipo da fonte será usado normalmente.

Entender esses períodos significa que você pode usar font-display para decidir como a fonte será renderizada, dependendo do download ou do momento em que foi feito.

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

Para trabalhar com o descritor font-display, adicione-o às regras @font-face:

@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 aceita o seguinte intervalo de valores auto | block | swap | fallback | optional.

automática

auto usa a estratégia de exibição de fontes usada pelo user agent. A maioria dos navegadores tem atualmente uma estratégia padrão semelhante ao 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" no início se a fonte não é 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ó será usado se a renderização de texto em uma família tipográfica específica for necessária para que a página possa ser usada.

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 desenha o texto imediatamente com um substituto se o tipo de fonte não for carregado, mas troca o tipo de fonte assim que ele é carregado. Semelhante a block, esse valor só deve 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 exibirá uma mensagem correta. O texto do logotipo é um bom candidato para troca, já que exibir o nome de uma empresa usando um substituto razoável transmitirá a mensagem, mas você usaria o tipo de letra oficial.

fallback

fallback dá 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 é renderizado com um substituto no início se não for carregado, mas a fonte é trocada assim que é carregada. No entanto, se passar muito tempo, o substituto será usado pelo restante da vida útil da página. O substituto é uma boa opção para itens como corpo de texto, em que você gostaria que o usuário começasse a ler o mais rápido possível e não quer perturbar a experiência mudando o texto conforme 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. Semelhante a um substituto, essa é uma boa escolha para quando o download da fonte é mais interessante, mas não essencial para a experiência. O valor opcional deixa que o navegador decida se quer iniciar o download da fonte, o que pode escolher não fazer ou pode fazer isso como uma prioridade baixa, dependendo do que considerar 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 o download de uma fonte pode não ser o melhor uso dos recursos.

Suporte ao navegador

No momento, a font-display está por trás da sinalização de Recursos experimentais da plataforma da Web no Chrome 49 para computador e será lançada no Opera e no Opera para Android.

Demonstração

Confira o exemplo (link em inglês) para testar o font-display. Para desenvolvedores com foco em desempenho, ela pode ser mais uma ferramenta útil.