Garanta que o texto permanece visível durante o carregamento das fontes web

Published on Updated on

Translated to: English, Español, 한국어, Pусский

As fontes geralmente são arquivos grandes que demoram um pouco para carregar. Alguns navegadores ocultam o texto até que a fonte carregue, causando um flash de texto invisível (Flash Of Invisible Text - FOIT) .

Como falha a auditoria de exibição de fontes do Lighthouse

O Lighthouse sinaliza todas as URLs de fonte que podem ocultar texto invisível:

Uma captura de tela da auditoria Lighthouse Garanta que o texto permanece visível durante a carga de fontes de web

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Como evitar mostrar texto invisível

A maneira mais fácil de evitar a exibição de texto invisível durante o carregamento de fontes personalizadas é mostrar temporariamente uma fonte do sistema. Ao incluir font-display: swap no seu estilo @font-face, você pode evitar FOIT na maioria dos navegadores modernos:

@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}

A API font-display especifica como uma fonte é exibida. swap informa ao navegador que o texto usando a fonte deve ser exibido imediatamente usando uma fonte do sistema. Assim que a fonte personalizada estiver pronta, ela substituirá a fonte do sistema. (Veja Evite texto invisível durante o carregamento para mais informações.)

Pré-carregue as fontes da web

Use <link rel="preload" as="font"> para baixar seus arquivos de fonte com antecedência. Saiba mais:

Google Fonts

Adicione o parâmetro &display=swap ao final da URL do Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Suporte de navegador

Vale a pena mencionar que nem todos os principais navegadores suportam font-display: swap, então você poderá ter que trabalhar um pouco mais para consertar o problema do texto invisível.

Codelab

Confira o codelab Evite flashes de texto invisível para aprender como evitar FOIT em todos os navegadores.

Orientações específicas para diferentes pilhas

Drupal

Especifique @font-display ao definir fontes personalizadas em seu tema.

Magento

Especifique @font-display ao definir fontes personalizadas .

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.