A partir do Chrome 83, é possível combinar link rel="preload" e font-display: optional para remover completamente a instabilidade de layout
Ao otimizar os ciclos de renderização, o Chrome 83 elimina a mudança de layout ao pré-carregar fontes opcionais.
Combinar <link rel="preload"> com font-display: optional é a maneira mais eficaz de
garantir que não haja instabilidade de layout ao renderizar fontes personalizadas.
Compatibilidade com navegadores
Confira os dados da MDN para informações atualizadas sobre o suporte em vários navegadores:
Renderização de fontes
A mudança de layout, ou novo layout, ocorre quando um recurso em uma página da Web muda dinamicamente, resultando em uma "mudança" de conteúdo. A busca e a renderização de fontes da Web podem causar mudanças de layout diretamente de uma das duas maneiras:
- Uma fonte substituta é trocada por uma nova ("flash de texto sem estilo")
- O texto "invisível" é mostrado até que uma nova fonte seja renderizada na página ("flash de texto invisível")
A propriedade CSS font-display permite modificar o comportamento de renderização de fontes personalizadas usando uma variedade de valores compatíveis (auto, block, swap, fallback e optional). A escolha do valor a ser usado depende do comportamento preferido para fontes carregadas de forma assíncrona. No entanto, cada um desses valores compatíveis pode acionar o novo layout
de uma das duas maneiras listadas acima, até agora.
Fontes opcionais
A propriedade font-display usa uma linha do tempo de três períodos para processar fontes que precisam ser
baixadas antes de serem renderizadas:
- Bloquear: renderiza o texto "invisível", mas muda para a fonte da Web assim que o carregamento é concluído.
- Troca: renderiza o texto usando uma fonte de sistema substituta, mas muda para a fonte da Web assim que ela termina de carregar.
- Falha: renderizar o texto usando uma fonte do sistema substituta.
Antes, as fontes designadas com font-display: optional tinham um período de bloqueio de 100 ms e nenhum período de
troca. Isso significa que o texto "invisível" é exibido por um breve momento antes de mudar para uma fonte
alternativa. Se a fonte não for baixada em até 100 ms, a fonte substituta será usada e nenhuma troca
vai ocorrer.
font-display: optional no Chrome quando a fonte é baixada depois do período de bloqueio de 100 msNo entanto, se a fonte for baixada antes do término do período de bloqueio de 100 ms, a fonte personalizada será renderizada e usada na página.
font-display: optional no Chrome quando a fonte é baixada antes do período de bloqueio de 100 msO Chrome renderiza a página novamente duas vezes nos dois casos, independentemente de a fonte substituta ser usada ou de a fonte personalizada terminar de carregar a tempo. Isso causa uma leve oscilação de texto invisível e, nos casos em que uma nova fonte é renderizada, uma instabilidade de layout que move parte do conteúdo da página. Isso ocorre mesmo que a fonte esteja armazenada no cache em disco do navegador e possa ser carregada bem antes do término do período de bloqueio.
As otimizações foram implementadas no Chrome 83 para remover totalmente o primeiro ciclo de renderização de fontes opcionais
pré-carregadas com <link rel="preload'>.
Em vez disso, a renderização é bloqueada até que a fonte personalizada termine de carregar ou que um determinado período
tenha passado. No momento, esse período de tempo limite está definido como 100 ms, mas pode mudar em breve
para otimizar o desempenho.
font-display: optional no Chrome quando as fontes são pré-carregadas e a fonte é baixada depois do período de bloqueio de 100 ms (sem flash de texto invisível)
font-display: optional no Chrome quando as fontes são pré-carregadas e a fonte é baixada antes do período de bloqueio de 100 ms (sem flash de texto invisível)O pré-carregamento de fontes opcionais no Chrome remove a possibilidade de instabilidade de layout e flash de texto sem estilo. Isso corresponde ao comportamento necessário, conforme especificado no CSS Fonts Module Level 4, em que as fontes opcionais nunca devem causar um novo layout, e os user agents podem atrasar a renderização por um período adequado.
Embora não seja necessário pré-carregar uma fonte opcional, isso aumenta muito a chance de ela ser carregada antes do primeiro ciclo de renderização, especialmente se ainda não estiver armazenada no cache do navegador.
Conclusão
A equipe do Chrome quer saber sobre suas experiências de pré-carregamento de fontes opcionais com essas novas otimizações em vigor. Registre um problema se você tiver problemas ou quiser enviar sugestões de recursos.