Por que isso é importante para você?
As fontes geralmente são arquivos grandes que demoram um pouco para carregar. Para lidar com isso, alguns navegadores escondem o texto até que a fonte carregue (o "flash de texto invisível").
A Largest Contentful Paint (LCP) pode atrasar a renderização do texto. Se você estiver otimizando o desempenho, convém evitar o "flash de texto invisível" (FOIT, na sigla em inglês) e mostrar o conteúdo aos usuários imediatamente usando uma fonte do sistema, o que cria um "flash de texto sem estilo" (FOUT, na sigla em inglês).
Padrões do navegador para exibir fontes
Estes são os comportamentos de carregamento de fonte padrão para navegadores comuns:
| Navegador | Comportamento padrão se a fonte não estiver pronta... |
|---|---|
| Chrome e Edge | O texto será ocultado por até três segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte esteja pronta e, em seguida, a trocará. |
| Firefox | O texto será ocultado por até três segundos. Se o texto ainda não estiver pronto, ele usará uma fonte do sistema até que a fonte esteja pronta e, em seguida, a trocará. |
| Safari | Oculta o texto até que a fonte esteja pronta. |
Mostrar texto imediatamente
Este guia descreve duas maneiras de exibir texto o mais rápido possível: a primeira abordagem é simples e tem um bom navegador compatível. A segunda abordagem é detalhada, mas pode fornecer mais opções para você. A melhor escolha para seu site depende dos seus requisitos.
Opção 1: usar font-display
font-display é uma API para especificar a estratégia de exibição de fontes. swap informa ao navegador que o texto que usa essa fonte precisa ser mostrado imediatamente usando uma fonte do sistema. Quando a fonte personalizada estiver pronta, a fonte do sistema será trocada.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
Se um navegador não for compatível com font-display, embora todos os navegadores mais recentes ofereçam suporte ao comportamento padrão de carregamento de fontes.
Opção 2: aguardar para usar fontes personalizadas até que elas sejam carregadas
Com um pouco mais de trabalho, é possível considerar uma abordagem mais personalizada.
Há três partes nessa abordagem:
- Não use uma fonte personalizada no carregamento inicial da página refatorando seu CSS para não usar fontes personalizadas inicialmente. Isso garante que o navegador mostre o texto imediatamente usando uma fonte do sistema.
- Detectar quando a fonte personalizada é carregada usando a API CSS Font Load
- Atualize o estilo da página para usar a fonte personalizada.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
Isso também pode ser feito com a biblioteca FontFaceObserver, que algumas acham uma API mais fácil de usar.
Isso permite fazer várias considerações ao carregar as fontes. Por exemplo, todas as fontes podem ser carregadas de uma só vez, evitando vários layouts conforme cada fonte é carregada. Os sites também poderiam optar por não carregar fontes para usuários em conexões mais lentas ou para aqueles que usam a opção Salvar dados.
Verificar
Execute o Lighthouse para verificar se o site está usando font-display: swap para exibir texto:
- Pressione Control+Shift+J (ou Command+Option+J no Mac) para abrir o DevTools.
- Clique na guia Lighthouse.
- Verifique se a caixa de seleção Desempenho está marcada na lista Categorias.
- Clique no botão Gerar relatório.
Confirme se a auditoria Garantir que o texto permaneça visível durante o carregamento da webfont esteja aprovada.