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 desempenho. O novo descritor font-display para @font-face permite que os desenvolvedores decidam como as fontes da Web serão renderizadas (ou usadas como substituto), dependendo do tempo que leva para carregar.

Diferenças na renderização de fontes hoje

As fontes da Web permitem que os desenvolvedores incorporem tipografia rica aos projetos, com a desvantagem de que, se o usuário ainda não tiver uma fonte, o navegador terá que gastar algum tempo fazendo o download dela. 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 texto se ele demorar muito para aparecer.

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

• O Chrome e o Firefox têm um tempo limite de três segundos. Depois dele, o texto é mostrado com a fonte de fallback. Se a fonte conseguir fazer o download, uma troca ocorrerá e o texto será renderizado novamente com a fonte pretendida.
• O Internet Explorer tem um tempo limite de zero segundo, o que resulta em uma renderização de texto imediata. Se a fonte solicitada ainda não estiver disponível, um fallback será usado e o texto será renderizado novamente 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 padrão).

Para piorar as coisas, os desenvolvedores têm controle limitado para decidir como essas regras vão afetar o aplicativo. Um desenvolvedor com foco na performance pode preferir uma experiência inicial mais rápida que usa uma fonte de fallback e só usa a fonte da Web mais bonita em visitas subsequentes depois que ela é transferida. Usando ferramentas como a API Font Loading, talvez seja possível substituir alguns comportamentos padrão do navegador e alcançar ganhos de desempenho, mas isso tem o custo de precisar escrever quantidades não triviais de JavaScript, que precisam ser incorporadas à página ou solicitadas em um arquivo externo, o que gera latência HTTP adicional.

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

Cronogramas de download de fontes

Semelhante aos comportamentos de tempo limite de fonte que alguns navegadores implementam hoje, o font-display segmenta o tempo 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 é carregado, qualquer elemento que tentar usá-lo deverá renderizar com um tipo de fonte de fallback invisível. Se o tipo de fonte for carregado com sucesso 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 é carregado, qualquer elemento que tentar usá-lo deverá renderizar com um tipo de fonte de fallback. Se o tipo de fonte for carregado com sucesso durante o período de troca, ele 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 estiver carregado quando esse período começar, ele será marcado como uma falha de carregamento, o que causa o uso normal de fonte de fallback. 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 será renderizada, dependendo do sucesso e do momento do download.

Qual font-display é ideal para você?

Para trabalhar com o descritor font-display, adicione as regras @font-face a ele:

@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, o font-display é compatível com o seguinte intervalo de valores auto | block | swap | fallback | optional.

automático

auto usa qualquer estratégia de exibição de fonte usada pelo user agent. A maioria dos navegadores atualmente tem uma estratégia padrão semelhante a bloqueio.

bloquear

block dá ao tipo de fonte um curto período de bloqueio (3 segundos é o recomendado na maioria dos casos) e um período de troca infinito. Em outras palavras, o navegador mostra um texto "invisível" se a fonte não for carregada, mas troca o tipo de fonte assim que ela for 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 conter "tinta". Esse valor só deve ser usado se a renderização de texto em um tipo de fonte específico for necessária para a usabilidade da página.

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 renderiza o texto imediatamente com um fallback, caso o tipo de fonte não tenha sido 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 de qualquer fonte ainda transmitirá a mensagem correta. Textos de logotipo são bons candidatos para troca, já que a exibição do nome de uma empresa usando um fallback razoável transmite a mensagem, mas você poderia usar a fonte oficial.

fallback

fallback dá ao tipo de fonte um período de bloqueio extremamente pequeno (100 ms ou menos é o 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 fallback primeiro, caso não tenha sido carregado, mas a fonte é trocada assim que ela é carregada. No entanto, se passar muito tempo, o fallback será usado pelo restante do tempo de vida da página. O fallback é um bom candidato para itens como texto do corpo, em que você quer que o usuário comece a ler o mais rápido possível, sem que a experiência seja perturbada com a mudança de texto enquanto uma nova fonte é carregada.

opcional

optional 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 ao fallback, essa é uma boa escolha para quando o download da fonte é algo interessante, mas não essencial para a experiência. O valor opcional deixa ao navegador a decisão sobre iniciar o download da fonte (o que ele pode escolher não fazer ou aplicar baixa prioridade), dependendo do que considerar melhor para o usuário. Isso pode ser benéfico em situações nas quais o usuário está com conexão fraca e o download de uma fonte pode não ser o melhor uso dos recursos.

Suporte ao navegador

No momento, font-display está por trás da flag "Experimental Web Platform Features" no Chrome 49 para computadores e está sendo enviado no Opera e no Opera para Android.

Demonstração

Confira o exemplo para testar o font-display. Para desenvolvedores preocupados com a performance, ela pode ser mais uma ferramenta útil.