Font loading lento no WordPress: como corrigir

Tipo Performance & Velocidade

Nome do erro Fontes carregando lentamente no WordPress EN: WordPress slow font loading

Severidade Atenção

Descrição O font loading lento no WordPress acontece quando as fontes web (woff2, woff ou ttf) demoram a baixar e o navegador segura o texto até a fonte chegar. O resultado e texto invisivel por um instante (FOIT) ou uma troca visivel de fonte (FOUT), o que atrasa a primeira pintura e eleva o LCP da página.

O que é o font loading lento no WordPress?

Toda fonte personalizada declarada em uma regra @font-face precisa ser baixada antes de o navegador pintar o texto com ela. Sem nenhuma configuração, muitos navegadores escondem o texto enquanto esperam a fonte, criando o flash of invisible text (FOIT): o usuário ve espaco em branco onde deveria haver conteúdo. Quando a fonte enfim carrega, o texto aparece de uma vez. Em páginas WordPress o problema piora porque tema, page builder e plugins costumam puxar várias famosas familias do Google Fonts de um domínio externo, cada uma exigindo uma conexão nova e um arquivo separado. Adicionar font-display: swap, hospedar as fontes no próprio domínio e dar preload no arquivo da fonte principal são as três alavancas que tiram a fonte do caminho crítico e fazem o texto aparecer rápido com uma fonte de fallback do sistema.

Como identificar

O texto da página fica invisivel por um instante e depois aparece de uma vez, o chamado flash of invisible text (FOIT), perceptivel principalmente na primeira visita sem cache.
O texto abre numa fonte do sistema (Arial ou Times) e troca para a fonte do tema depois de meio segundo, causando um salto visivel de layout.
O PageSpeed Insights aponta a oportunidade Ensure text remains visible during webfont load no relatório de performance.
Na aba Network do navegador, os arquivos woff2 ou woff aparecem demorando para baixar de fonts.gstatic.com ou de um domínio externo, depois dos demais recursos da página.

Como prevenir

Mantenha o font-display: swap e a auto-hospedagem das fontes ativos, para nenhuma fonte nova voltar a esconder o texto ou depender de domínio externo
Sempre que adicionar uma fonte, sirva o arquivo em woff2 do próprio domínio e limite o número de familias e pesos realmente usados
Após cada troca de tema ou plugin, revise na aba Network se surgiram novas fontes externas e ajuste o preload da fonte acima da dobra

Causa

Google Fonts carregado do domínio externo fonts.googleapis.com em vez de auto-hospedado, exigindo uma conexão DNS e TLS nova so para buscar a fonte.
Regra @font-face sem a propriedade font-display: swap, fazendo o navegador esconder o texto até o arquivo da fonte terminar de baixar.
Fonte principal acima da dobra sem preload, descoberta tarde pelo navegador porque so aparece dentro do arquivo CSS, que e baixado e processado antes.
Várias familias e pesos de fonte enfileirados por tema, Elementor e plugins, cada arquivo woff2 em uma requisicao separada que concorre com o resto da página.
Fontes entregues em formato antigo ttf ou woff em vez de woff2, que e bem menor e baixa mais rápido.

Como resolver

Confirme o gargalo na aba Network: abra o site numa janela anonima, pressione F12, va na aba Network e filtre por Font. Recarregue a página e observe de onde vem cada fonte e quanto tempo cada arquivo demora. Anote se a fonte vem de um domínio externo e qual e o formato do arquivo. Os caminhos abaixo são os filtros e o tipo a observar.
```
Network -> Filtro: Font
fonts.gstatic.com
fonts.googleapis.com
```
Ative o font-display: swap no WP Rocket: no painel, abra o menu de Configurações do WP Rocket. Na otimização de arquivos, ao ativar a otimização de CSS o WP Rocket já aplica a propriedade swap as fontes, fazendo o texto aparecer de imediato com a fonte de fallback enquanto a definitiva carrega. O caminho de menu esta abaixo.
```
Configurações -> WP Rocket -> Otimização de Arquivos
Otimizar a entrega de CSS
```
Auto-hospede o Google Fonts no próprio domínio: deixe de servir a fonte de um domínio externo e passe a entrega-la do seu site, eliminando a conexão DNS e TLS extra. Um plugin de auto-hospedagem de fontes ou a opção equivalente do seu plugin de performance baixa os arquivos para a pasta de uploads e reescreve as URLs. O diretório onde as fontes ficam gravadas esta abaixo.
```
wp-content/uploads/fonts
```
Faca preload da fonte principal: informe ao WP Rocket o caminho do arquivo woff2 da fonte usada acima da dobra. Na otimização de carregamento, no campo de preload de fontes, cole uma URL de fonte por linha. O navegador passa a buscar essa fonte logo no inicio, em prioridade, sem esperar o CSS ser processado. O caminho do campo e o exemplo de URL estão abaixo.
```
Configurações -> WP Rocket -> Otimização do Carregamento -> Preload Fonts
/wp-content/uploads/fonts/inter-regular.woff2
```
Reduza familias e converta para woff2: limite o site a uma ou duas familias de fonte e poucos pesos, removendo as variantes que o tema carrega sem usar. Garanta que cada fonte esteja em woff2, o formato mais leve, em vez de ttf ou woff. Menos arquivos e arquivos menores significam menos requisicoes concorrendo com o render.
Limpe o cache e meca de novo: limpe o cache do WP Rocket e do CDN, recarregue o site sem cache e rode o PageSpeed Insights novamente. Confirme que a oportunidade de texto visivel durante o carregamento da fonte sumiu e que o LCP melhorou. Repita o teste em mobile, onde o ganho costuma ser maior.

HTML

<!-- 1) Preload da fonte principal acima da dobra: o navegador busca o woff2 cedo, em prioridade -->
<link rel="preload" as="font" type="font/woff2"
      href="/wp-content/uploads/fonts/inter-regular.woff2" crossorigin>

<!-- 2) @font-face auto-hospedado com font-display: swap: texto aparece com fallback ate a fonte chegar -->
<style>
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/uploads/fonts/inter-regular.woff2') format('woff2');
}
body { font-family: 'Inter', system-ui, sans-serif; }
</style>

Perguntas frequentes

O que e font loading lento no WordPress

E quando as fontes web demoram a baixar e o navegador segura o texto até a fonte chegar. Sem font-display: swap, isso causa o flash of invisible text (texto invisivel por um instante), e com fontes externas a conexão extra atrasa ainda mais a primeira pintura e piora o LCP.

Qual a diferenca entre FOIT e FOUT

FOIT (flash of invisible text) e quando o navegador esconde o texto até a fonte carregar, deixando espaco em branco. FOUT (flash of unstyled text) e quando o texto aparece de imediato numa fonte de fallback e depois troca pela definitiva. Com font-display: swap você troca o FOIT pelo FOUT, que e bem melhor para o usuário.

Para que serve o font-display: swap

Ele instrui o navegador a mostrar o texto na hora com uma fonte do sistema e substituir pela fonte personalizada assim que ela carregar. Assim o usuário nunca fica olhando uma tela com espaco vazio no lugar do texto, e a percepcao de velocidade da página melhora.

Auto-hospedar o Google Fonts deixa o site mais rápido

Sim, na maioria dos casos. Servir a fonte do seu próprio domínio elimina a conexão DNS e TLS extra com o servidor do Google e permite que a fonte aproveite o cache e o CDN do site. Também ajuda na privacidade, já que o navegador deixa de chamar um domínio externo a cada visita.

Por que fazer preload so da fonte principal

Porque o preload tira a fonte do fim da fila e a coloca em prioridade no inicio do carregamento. Se você der preload em fontes demais, elas concorrem com recursos criticos e o efeito se perde. O ideal e fazer preload apenas da fonte usada acima da dobra, que e a que o usuário ve primeiro.

Qual formato de fonte e o mais rápido

O woff2 e o formato mais leve e mais bem suportado pelos navegadores atuais. Ele e bem menor que ttf e woff, entao baixa mais rápido. Sempre que possível, sirva suas fontes em woff2 e remova os formatos antigos que o tema carregue sem necessidade.

Reduzir o número de fontes ajuda na velocidade

Ajuda bastante. Cada familia e cada peso e um arquivo separado para baixar. Limitar o site a uma ou duas familias e poucos pesos diminui o número de requisicoes que concorrem com o render, reduz o peso total da página e ainda deixa o layout mais consistente.

O WP Rocket resolve o font loading lento sozinho

Ele resolve boa parte: aplica font-display: swap ao otimizar o CSS e oferece um campo para preload de fontes. Mas a auto-hospedagem do Google Fonts, a escolha do woff2 e a reducao de familias dependem de configuração. O caminho mais rápido e combinar os recursos do WP Rocket com esses ajustes e medir no PageSpeed.

Atenção

Como corrigir o erro Critical CSS Not Generated no WP Rocket

O erro Critical CSS Not Generated aparece quando o WP Rocket não consegue gerar o CSS crítico ou o Used CSS de uma página, porque o serviço SaaS do plugin precisa acessar o site de fora e algo bloqueia esse acesso. Sem o CSS gerado, a otimização de entrega de CSS fica desligada e o site perde velocidade.

Atenção

Como corrigir o aviso de CSS não utilizado no WordPress

O aviso de unused CSS no WordPress aparece quando o PageSpeed Insights detecta folhas de estilo carregadas pela página, mas com regras que aquela página não aplica, o que pesa no LCP e no render. A correção gera o Used CSS por página com o Perfmatters e mantem o estilo usado, em vez de simplesmente apagar todo o CSS.

Atenção

Como corrigir a configuração de CDN entre Cloudflare e WP Rocket no WordPress

O erro de CDN entre Cloudflare e WP Rocket ocorre quando o add-on Cloudflare do WP Rocket recebe credenciais erradas, o CNAME do CDN aponta para o domínio Cloudflare ou o Rocket Loader e a minificacao da Cloudflare se sobrepoem aos arquivos otimizados, deixando o cache desatualizado ou o layout quebrado.

Atenção

Como corrigir o WP Rocket que não minifica o CSS

O WP Rocket minifica CSS de forma incompleta quando a opção Minify CSS files esta ligada mas certas folhas ficam de fora por regra do plugin: CSS inline, arquivos já terminados em .min, folhas com data-no-minify, CSS via @import e o CSS de posts do Elementor. A correção e ver qual folha o plugin ignora, limpar o cache e ajustar a origem.

Grave

Como corrigir JavaScript do JetEngine removido pelo Perfmatters

O JavaScript do JetEngine removido pelo Perfmatters acontece quando o Delay JavaScript ou o Script Manager tira o jet-engine frontend.min.js e o jQuery da página. O resultado e Listing Grid vazio, JetSmartFilters que não filtra e Load More que não responde. A correção e excluir os scripts do JetEngine do delay, não desligar o Perfmatters.

Atenção

Como corrigir o erro de fontes do Google no WP Rocket

O erro de fontes do Google no WP Rocket aparece quando o recurso Remove Unused CSS, na aba File Optimization, apaga a regra font-face por considera-la não usada e a página passa a exibir a fonte de fallback do navegador (serif ou Arial). A correção e preservar a regra no campo CSS safelist e limpar o Used CSS.

Setores

Extensões

Integrações

Como corrigir o erro de carregamento de fontes no WordPress

O que é o font loading lento no WordPress?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o erro Critical CSS Not Generated no WP Rocket

Como corrigir o aviso de CSS não utilizado no WordPress

Como corrigir a configuração de CDN entre Cloudflare e WP Rocket no WordPress

Como corrigir o WP Rocket que não minifica o CSS

Como corrigir JavaScript do JetEngine removido pelo Perfmatters

Como corrigir o erro de fontes do Google no WP Rocket

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos