Esta página foi traduzida pela API Cloud Translation.

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. No entanto, 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 substituição é 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, após o qual o texto é mostrado com a fonte substituta. Se a fonte for transferida, uma troca ocorrerá e o texto será renderizado novamente com a fonte pretendida.
O Internet Explorer tem um tempo limite de zero segundos, o que resulta na renderização imediata do texto. Se a fonte solicitada ainda não estiver disponível, um substituto 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 de referência).

Para piorar as coisas, os desenvolvedores têm controle limitado para decidir como essas regras vão afetar o aplicativo. Um desenvolvedor preocupado com o desempenho 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 grupo de trabalho do CSS 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.

Prazos de download de fontes

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

O primeiro período é o período de bloco de fonte. Durante esse período, se a fonte não for carregada, qualquer elemento que tente usá-la precisará renderizar com uma fonte substituta invisível. Se o tipo de fonte for carregado durante o período de bloqueio, ele será usado normalmente.
O período de troca de fonte ocorre imediatamente após o período de bloqueio de fonte. Durante esse período, se a família de fontes não for carregada, qualquer elemento que tente usá-la precisa ser renderizado com uma família de fontes de fallback. Se o tipo de fonte for carregado com sucesso durante o período de troca, ele será usado normalmente.
O período de falha de fonte ocorre imediatamente após o período de troca de fonte. Se o tipo de fonte ainda não estiver carregado quando esse período começar, ele será marcado como uma carga com falha, causando a substituição de fonte normal. Caso contrário, a família de fontes será usada normalmente.

Com a compreensão desses períodos, é possível usar font-display para decidir como a fonte será renderizada, dependendo de quando ou se ela foi transferida por download.

Qual font-display é ideal para você?

Para trabalhar com o descritor font-display, adicione-o às regras at-rule @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ático

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

bloquear

block dá à fonte um período de bloqueio curto (3 segundos é 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 a fonte assim que ela for carregada. Para fazer isso, o navegador cria uma fonte anônima com métricas semelhantes à fonte selecionada, mas com todos os glifos sem "tinta". Esse valor só deve ser usado se a renderização de texto em um tipo de letra específico for necessária para que a página seja utilizável.

trocar

swap dá à fonte um período de bloqueio de zero segundos e um período de troca infinito. Isso significa que o navegador renderiza o texto imediatamente com um substituto se a família de fontes não for carregada, mas troca a família de fontes assim que ela for carregada. Assim como 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 vai transmitir uma mensagem correta. O texto do logotipo é um bom candidato para troca, já que mostrar o nome de uma empresa usando um substituto razoável vai transmitir a mensagem, mas você poderá usar a família tipográfica oficial.

fallback

O fallback dá à fonte um período de bloqueio extremamente pequeno (100 ms ou menos é recomendado na maioria dos casos) e um período de troca curto (três segundos é recomendado na maioria dos casos). Em outras palavras, o tipo de fonte é renderizado com um substituto se não for carregado, mas a fonte é trocada assim que for carregada. No entanto, se passar muito tempo, o substituto será usado pelo restante da vida útil da página. O substituto é um bom candidato para coisas como texto do corpo, em que você quer que o usuário comece a ler o mais rápido possível e não quer atrapalhar a experiência dele movendo o texto à medida que uma nova fonte é carregada.

opcional

Opcional dá à 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 opção para quando o download da fonte é mais uma opção mas não é essencial para a experiência. O valor optional deixa a decisão de iniciar o download da fonte a cargo do navegador, que pode optar por não fazer isso ou pode fazer isso com prioridade baixa, dependendo do que ele considera ser melhor para o usuário. Isso pode ser útil em situações em que o usuário está em uma 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á atrás da flag "Experimental Web Platform Features" no Chrome 49 para computador e é 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.