Menu e LCP: como a navegação bloqueia seu largest contentful paint

Carregamento de fontes no menu: prevenindo deslocamentos de layout e texto invisível

Estratégias font-display para menus de navegação—equilibrando consistência de marca com LCP e CLS.

Você passou horas escolhendo a tipografia perfeita para sua loja. Os rótulos do menu usam uma fonte sans-serif personalizada que combina exatamente com sua marca. Mas toda vez que você testa a loja no mobile, vê um piscar de texto invisível onde o menu deveria estar, seguido por um deslocamento de layout quando a fonte finalmente carrega. Seu score de CLS é 0,18, que o Google marca como “precisa de melhoria”, e você suspeita que a fonte do menu é a culpada.

O problema não é a fonte em si. O problema é como o navegador lida com o carregamento de fontes. Por padrão, a maioria dos navegadores oculta o texto até que as fontes personalizadas terminem de baixar, o que pode levar de 300 a 800 milissegundos em uma conexão móvel lenta. A área do menu fica vazia, a página parece quebrada, e quando a fonte finalmente aparece, desloca tudo abaixo dela. Isso prejudica tanto o LCP (porque o conteúdo significativo é atrasado) quanto o CLS (porque o layout se move).

Este artigo explica as cinco estratégias de font-display, qual funciona melhor para menus de navegação e como implementar o carregamento de fontes que não quebre sua marca nem seus Core Web Vitals.

Leitura rápida

Os navegadores ocultam o texto durante o download da fonte por padrão, causando Flash of Invisible Text (FOIT).
font-display controla se o texto aparece imediatamente ou aguarda a fonte personalizada.
font-display: swap é a melhor escolha para texto do menu—mostra o fallback imediatamente, alterna quando pronto.
Fontes do sistema (já instaladas no dispositivo) têm custo zero de carregamento e eliminam FOIT/FOUT completamente.
O pré-carregamento de fontes pode reduzir o atraso, mas não elimina o risco de deslocamento de layout.

Os Dois Problemas de Carregamento de Fontes: FOIT e FOUT

Quando um navegador encontra uma fonte web personalizada, precisa decidir o que fazer com o texto que usa essa fonte enquanto o arquivo da fonte ainda está baixando. Há dois comportamentos possíveis, cada um com desvantagens.

Flash of Invisible Text (FOIT)

O navegador oculta o texto até que a fonte carregue. O espaço do texto é reservado, mas nada aparece. Se a fonte levar 500 milissegundos para baixar, o usuário fica olhando para um espaço em branco por meio segundo. Este é o comportamento padrão na maioria dos navegadores.

FOIT é ruim para LCP porque o conteúdo de texto significativo não fica visível até que a fonte carregue. Também é ruim para usabilidade—os usuários não conseguem ler o menu, o que pode fazê-los pensar que a página está quebrada.

Flash of Unstyled Text (FOUT)

O navegador mostra o texto imediatamente usando uma fonte de fallback (geralmente uma fonte do sistema como Arial ou Helvetica), depois alterna para a fonte personalizada assim que carrega. O texto fica legível logo de cara, mas a alternância pode causar um deslocamento de layout se a fonte de fallback e a fonte personalizada tiverem dimensões diferentes.

FOUT é melhor para LCP (o texto aparece imediatamente) mas pode prejudicar CLS se não for tratado com cuidado. A chave é fazer a fonte de fallback ter dimensões que combinem com a fonte personalizada o máximo possível.

As Cinco Estratégias de font-display

A propriedade CSS font-display controla como os navegadores lidam com o período de carregamento de fonte. Há cinco valores possíveis, cada um com timing e comportamento de fallback diferentes.

Valor	Comportamento	Melhor para
`auto`	Navegador decide (geralmente FOIT por 3 segundos, depois FOUT)	Não recomendado—imprevisível
`block`	FOIT por até 3 segundos, depois alterna	Texto decorativo onde a fonte de marca é crítica
`swap`	FOUT imediatamente—mostra fallback, alterna quando pronto	Texto de corpo, menus de navegação
`fallback`	FOIT por 100ms, depois FOUT por 3s, depois fica com fallback	Títulos onde a fonte importa mas a velocidade também
`optional`	FOIT por 100ms, depois usa fallback se fonte não estiver pronta, nunca alterna	Texto crítico para performance

Para menus de navegação, font-display: swap é quase sempre a escolha certa. Torna o menu legível imediatamente (bom para LCP e usabilidade) e alterna para a fonte de marca assim que carrega (bom para consistência de marca). O risco é deslocamento de layout, que abordaremos em um momento.

Como Usar font-display em Sua Folha de Estilos

Se sua fonte está definida no CSS usando @font-face, adicione a propriedade font-display:

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

.menu-link {
  font-family: 'BrandFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

A pilha de font-family é importante. Liste sua fonte personalizada primeiro, depois fontes do sistema como fallbacks. Isso garante que o texto do menu apareça instantaneamente em uma fonte do sistema, depois alterne para sua fonte personalizada quando carregar.

Se sua fonte é carregada do Google Fonts, adicione o parâmetro display=swap à URL:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

O Google Fonts injetará automaticamente font-display: swap no CSS gerado.

Prevenindo Deslocamento de Layout com Compatibilidade de Fonte de Fallback

O problema com font-display: swap é que se a fonte de fallback e a fonte personalizada tiverem tamanhos ou espaçamento diferentes, o texto refluirá quando a alternância acontecer, causando um deslocamento de layout. Isto é especialmente notável em menus de navegação, onde até um pequeno deslocamento pode mover todo o conteúdo da página.

A solução é ajustar a fonte de fallback para combinar com as dimensões da fonte personalizada usando as propriedades size-adjust, ascent-override e descent-override. Estas são recursos CSS relativamente novos (suportados em todos os navegadores modernos a partir de 2024) que permitem ajustar uma fonte de fallback para combinar com uma fonte personalizada.

Aqui está um exemplo:

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'BrandFont Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 95%;
  descent-override: 25%;
}

.menu-link {
  font-family: 'BrandFont', 'BrandFont Fallback', Arial, sans-serif;
}

A propriedade size-adjust dimensiona a fonte de fallback para que sua altura de x corresponda à fonte personalizada. As propriedades ascent-override e descent-override ajustam o espaçamento vertical.

Encontrar os valores certos requer teste. Ferramentas como Fallback Font Generator por Simon Hearne automatizam este processo. Você insere sua fonte personalizada e a ferramenta calcula os valores de override ideais para fontes do sistema comuns.

Compatibilizar fontes de fallback dessa forma reduz o CLS da alternância de fonte para quase zero. O texto ainda alterna da fonte de fallback para a fonte personalizada, mas o layout não se move porque as dimensões são idênticas.

Fontes do Sistema: A Alternativa de Custo Zero

A fonte mais rápida é nenhuma fonte—ou melhor, uma fonte do sistema que já está instalada no dispositivo do usuário. Fontes do sistema têm custo zero de download, custo zero de parse e risco zero de deslocamento de layout.

Aqui está uma pilha de fonte do sistema moderna que se vê bem em todas as plataformas:

.menu-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

Isso oferece a você:

San Francisco no macOS e iOS
Segoe UI no Windows
Roboto no Android
Padrões apropriados da plataforma no Linux

Fontes do sistema não são tão distintas quanto tipografias personalizadas, mas são limpas, legíveis e otimizadas para suas plataformas. Muitos sites de alto tráfego (GitHub, Medium, WordPress.com) usam fontes do sistema por razões de performance.

Se suas diretrizes de marca exigem uma fonte personalizada, considere usar fontes do sistema para o menu de navegação e reservar a fonte personalizada para títulos, texto de hero ou cópia de corpo onde tem mais impacto visual. O menu é interface funcional. Não precisa carregar a marca tão pesadamente quanto um título.

Pré-carregando Fontes para Reduzir a Duração de FOUT

Mesmo com font-display: swap, há um atraso entre o fallback aparecer e a fonte personalizada alternar. Em uma conexão lenta, isso pode ser 500 milissegundos ou mais. Pré-carregar o arquivo de fonte diz ao navegador para buscá-lo com alta prioridade no início do carregamento da página, o que reduz o atraso de alternância.

<link rel="preload" href="/fonts/brandfont.woff2" as="font" type="font/woff2" crossorigin>

O atributo crossorigin é necessário mesmo que a fonte esteja hospedada em seu próprio domínio, porque as fontes são buscadas com modo CORS.

Pré-carregar não elimina FOUT, mas reduz a duração. Se sua fonte de menu é pequena (menos de 50KB) e crítica para a marca, pré-carregar pode melhorar a performance percebida.

Atenção: Pré-carregar compete com outros recursos críticos como CSS e JavaScript. Apenas pré-carregue fontes que são usadas acima da dobra e são verdadeiramente essenciais. Pré-carregar muitos recursos pode desacelerar a renderização inicial.

Fontes de Ícone vs SVG Inline

Muitos menus de navegação usam fontes de ícone (Font Awesome, Remix Icon, Material Icons) para setas, ícones de busca e ícones de hamburger. Fontes de ícone são apenas fontes, então têm as mesmas características de carregamento que fontes de texto: FOIT por padrão, risco de deslocamento de layout e custo de download (geralmente 50-150KB para uma fonte de ícone completa).

SVG inline é uma escolha melhor para ícones de menu. Um SVG inline faz parte do HTML, então aparece imediatamente sem requisição de rede e sem atraso de carregamento de fonte. Também dimensiona perfeitamente e suporta estilo CSS.

Aqui está um exemplo:

<button class="menu-toggle" aria-label="Open menu">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="3" y1="12" x2="21" y2="12"></line>
    <line x1="3" y1="6" x2="21" y2="6"></line>
    <line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</button>

Este ícone de hamburger tem 200 bytes. Uma fonte de ícone completa com 2.000 ícones que você nunca usará tem 150KB. SVG inline também elimina o problema FOIT—o ícone aparece instantaneamente porque faz parte do HTML.

Aplicativos de menu modernos como Navi+ usam SVG inline para todos os ícones, o que é uma razão pela qual evitam os problemas de deslocamento de layout que afligem menus baseados em fontes de ícone.

Carregamento de Fonte Específico do Shopify

Temas Shopify geralmente carregam fontes de uma de três maneiras: do Google Fonts, do CDN do Shopify (via seletor de fonte de configurações de tema) ou de arquivos de fonte personalizados na pasta de ativos do tema.

Google Fonts

Se seu tema usa Google Fonts, certifique-se de que o parâmetro display=swap está na URL. Procure por uma linha como esta em theme.liquid:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600">

Mude para:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

Fontes do CDN do Shopify

Se seu tema usa o seletor de fonte integrado do Shopify (Settings > Typography), o Shopify fornece as fontes de seu CDN e automaticamente inclui font-display: swap a partir de 2023. Você não precisa fazer nada.

Arquivos de Fonte Personalizada

Se você enviou arquivos de fonte personalizada para a pasta de ativos de seu tema, adicione font-display: swap à declaração @font-face em seu CSS.

Medindo o Impacto do Carregamento de Fonte

Use Chrome DevTools para ver como as fontes afetam seu LCP e CLS.

Verificar FOIT

Abra DevTools, vá para a aba Network, filtre por “Font” e recarregue a página. Observe a área do menu. Se o texto do menu fica invisível por um período notável antes de aparecer, você tem FOIT. Adicione font-display: swap para corrigir.

Verificar Deslocamento de Layout

Abra DevTools, vá para a aba Performance, clique em Record, recarregue a página e pare a gravação. Procure na seção Experience por barras vermelhas “Layout Shift”. Clique em uma para ver quais elementos se deslocaram. Se o texto do menu está listado, a alternância de fonte causou um deslocamento de layout. Use compatibilidade de fonte de fallback para corrigir.

Medir CLS

Execute um teste Lighthouse (em DevTools ou PageSpeed Insights). Procure pelo score CLS e o diagnóstico “Avoid large layout shifts”. Se fontes são listadas como causa, você precisa de melhor compatibilidade de fallback ou deveria considerar mudar para fontes do sistema.

Vitória rápidaSe seu menu usa uma fonte personalizada e você está vendo problemas de CLS, tente mudar para uma pilha de fonte do sistema como teste. Execute Lighthouse novamente. Se CLS cai significativamente, a fonte personalizada era o problema. Você pode então decidir se o valor de marca da fonte personalizada vale o custo de performance, ou implementar compatibilidade de fallback para ter ambos.

Um menu de navegação bem otimizado lida com fontes de uma de duas maneiras.

Opção 1: Fontes do sistema. Sem fontes personalizadas, custo zero de download, zero de FOIT, zero de deslocamento de layout. O menu aparece instantaneamente com texto de aparência nativa.

.menu-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

Opção 2: Fonte personalizada com swap e compatibilidade de fallback. O texto do menu aparece imediatamente em uma fonte do sistema, depois alterna para a fonte personalizada sem deslocamento de layout.

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'BrandFont Fallback';
  src: local('Arial');
  size-adjust: 107%;
}

.menu-link {
  font-family: 'BrandFont', 'BrandFont Fallback', Arial, sans-serif;
}

Ambas abordagens resultam em um menu que é legível dentro do primeiro segundo de carregamento da página, que é o que LCP mede. A primeira abordagem é mais simples e rápida. A segunda abordagem preserva consistência de marca com custo mínimo de performance.

Para ícones, use SVG inline em vez de fontes de ícone. Os ícones aparecem instantaneamente, dimensionam perfeitamente e custam algumas centenas de bytes em vez de 150KB.

A maioria das lojas que mudam do carregamento padrão de fonte (FOIT, sem compatibilidade de fallback) para um desses padrões veem CLS cair 0,05 a 0,15 pontos e LCP melhorar 200 a 400 milissegundos no mobile. O menu fica igual para o usuário, mas o navegador o renderiza mais rápido e suavemente.

Este artigo é parte do guia maior sobre Menu e LCP: como a navegação bloqueia seu largest contentful paint.