Por que isso é importante?
As fontes geralmente são arquivos grandes que demoram para carregar. Para lidar com isso, alguns navegadores ocultam o texto até que a fonte seja carregada (o "flash de texto invisível").
A Maior exibição de conteúdo (LCP) pode demorar para aguardar a renderização do texto. Se você está 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).
O padrão do navegador para exibir fontes
Estes são os comportamentos padrão de carregamento de fonte para navegadores comuns:
| Navegador | Comportamento padrão se a fonte não estiver pronta... |
|---|---|
| Chrome e Edge | O texto fica oculto 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, trocará a fonte. |
| Firefox | O texto fica oculto 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, trocará a fonte. |
| Safari | Oculta o texto até que a fonte esteja pronta. |
Exibir texto imediatamente
Este guia descreve duas maneiras de exibir texto o mais rápido possível: a primeira é simples e tem um bom suporte ao navegador. A segunda abordagem é detalhada, mas pode fornecer mais opções para você. A melhor opção 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 sejam, ele vai continuar seguindo o comportamento padrão para carregar fontes.
Opção 2: aguardar até que as fontes personalizadas sejam carregadas para usar
Com um pouco mais de trabalho, uma abordagem mais personalizada pode ser considerada.
Essa abordagem tem três partes:
- Não use fontes personalizadas no carregamento inicial da página refatorando seu CSS para não usar fontes personalizadas inicialmente. Isso garante que o navegador exiba o texto imediatamente usando uma fonte do sistema.
- Detectar quando sua fonte personalizada é carregada usando a API CSS FontLoading.
- 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 pessoas consideram uma API mais fácil de usar.
Isso permite uma série de considerações adicionais ao carregar as fontes. Por exemplo, todas as fontes podem ser carregadas de uma vez, evitando vários layouts à medida que cada fonte é carregada. Os sites também podem 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 fonte da Web está aprovada.