Fontes do Google no WP Rocket: erro e como corrigir

Tipo Performance & Velocidade

Nome do erro Erro de fontes do Google no WP Rocket EN: WP Rocket Google Fonts error

Severidade Atenção

Descrição 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.

O que é erro de fontes do Google no WP Rocket?

O erro de fontes do Google no WP Rocket acontece quando uma das otimizacoes de CSS do plugin remove ou atrasa a regra que carrega a fonte, e a página passa a exibir a fonte de fallback do navegador em vez da fonte do tema. O caso mais comum vem do recurso Remove Unused CSS, dentro de File Optimization, na seção Optimize CSS delivery: ele envia a URL da página para a API do WP Rocket, que decide qual CSS e usado e descarta o resto, gravando o resultado em /cache/used-css/. Quando a regra font-face do Google Fonts ou a classe que aplica a font-family aparece sem uso evidente no HTML inicial, ela e cortada, e o texto cai para serif ou Arial. Um segundo caminho e o recurso Self-host Google Fonts: ao ativar ou desativar essa opção o WP Rocket limpa todo o Used CSS e reescreve as URLs de fonts.googleapis.com para arquivos locais, e até o cache ser regenerado a fonte pode piscar ou não carregar. O resultado visivel e sempre o mesmo: o site carrega, mas a tipografia esta errada.

Como identificar

O texto do site aparece em fonte serif ou Arial padrão do navegador no lugar da fonte do tema, mesmo com o site carregando normalmente
Ao abrir a página com o parametro de bypass no final da URL, a fonte correta volta a aparecer, confirmando que a causa esta na otimização do WP Rocket
No console do navegador (F12, aba Network, filtro Font) o arquivo .woff2 da fonte não e baixado, ou aparece com status diferente de 200
A fonte certa aparece por um instante e e substituida pela fonte de fallback (efeito de flash de texto sem estilo) logo após o carregamento
O problema some quando o recurso Remove Unused CSS e desligado e volta quando ele e religado

Como prevenir

Após ativar o Remove Unused CSS, revise as páginas principais e adicione de uma vez os seletores de fonte do tema ao CSS safelist, em vez de esperar a fonte quebrar para corrigir.
Defina um único plugin responsável por hospedar e otimizar Google Fonts; nunca deixe Self-host Google Fonts do WP Rocket ligado junto com OMGF ou Perfmatters fazendo a mesma coisa.
Sempre que trocar a fonte do tema ou instalar um construtor de páginas, limpe o Used CSS em WP Rocket -> Dashboard para forcar a regeneracao com a fonte nova.
Use o preload da fonte para o arquivo .woff2 principal, garantindo que a tipografia correta apareca já na primeira pintura e evitando o flash de texto sem estilo.

Causa

O recurso Remove Unused CSS, em File Optimization -> CSS Files -> Optimize CSS delivery, considerou a regra font-face do Google Fonts como CSS não usado e a removeu do Used CSS gravado em /cache/used-css/.
A classe ou seletor que aplica a font-family esta no campo CSS safelist vazio, entao o WP Rocket não teve instrucao para preservar a regra da fonte ao gerar o Used CSS.
O recurso Self-host Google Fonts foi ativado e reescreveu as URLs de fonts.googleapis.com para arquivos locais, mas o Used CSS antigo ainda apontava para a URL remota até ser limpo.
Outro plugin que também hospeda ou otimiza Google Fonts (OMGF, Perfmatters, Autoptimize) esta ativo ao mesmo tempo que o Self-host Google Fonts do WP Rocket, gerando duas fontes concorrentes e uma sobrescrevendo a outra.
O preload da fonte foi removido junto com o restante do CSS, atrasando o download do arquivo .woff2 e provocando o flash de texto sem estilo na primeira pintura da página.

Como resolver

Confirme que a causa e o WP Rocket: Abra a página com a tipografia errada acrescentando o parametro de bypass ao final da URL. Ele carrega a página sem nenhuma otimização do WP Rocket. Se a fonte correta voltar a aparecer, a causa esta confirmada na otimização de CSS do plugin.
```
https://seusite.com.br/página-afetada/?nowprocket
```
Descubra o seletor da fonte no console do navegador: Abra a página normal, pressione F12 e va na aba Elements. Clique no texto que esta com a fonte errada e veja, no painel Styles, qual classe aplica a propriedade font-family do tema. Anote esse seletor: ele e o que precisa ser preservado na próxima etapa. Confira também na aba Network, filtro Font, se o arquivo .woff2 da fonte foi baixado com status 200.
```
font-family
.site-title, body, h1, h2
```
Preserve a regra da fonte no campo CSS safelist: No painel, abra WP Rocket -> File Optimization -> CSS Files e va até a seção Optimize CSS delivery, com o Remove Unused CSS ligado. No campo CSS safelist, adicione o seletor da fonte e a regra font-face, um item por linha. Isso instrui o plugin a manter essas regras mesmo que pareçam sem uso. Salve as alterações.
```
@font-face
.site-title
body
```
Padronize quem hospeda a fonte: Se houver outro plugin tratando Google Fonts (OMGF, Perfmatters ou Autoptimize), mantenha apenas um responsável pela fonte. Escolha o Self-host Google Fonts do WP Rocket, em File Optimization, e desligue a hospedagem de fontes no outro plugin, ou faça o inverso. Deixar os dois ativos cria duas fontes concorrentes.
```
WP Rocket -> File Optimization -> Self-host Google Fonts
```
Limpe o Used CSS e valide a página: Va em WP Rocket -> Dashboard e clique em Clear Used CSS para descartar o CSS antigo que ainda apontava para a fonte removida, e depois em Clear and preload cache. Recarregue a página afetada com recarga forte e confirme que a tipografia correta voltou e que o arquivo da fonte carrega com status 200.
```
Ctrl + Shift + R
```

CSS

/* CSS safelist do WP Rocket (File Optimization -> CSS Files) */
/* Um seletor ou regra por linha. Preserva a fonte do tema    */
/* que o Remove Unused CSS removeria por parecer sem uso.      */

@font-face
.site-title
body
h1, h2, h3

/* Preload do arquivo principal da fonte para evitar o flash   */
/* de texto sem estilo (vai no <head> via tema ou snippet):    */
<link rel="preload" href="/wp-content/themes/seu-tema/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Perguntas frequentes

Por que minha fonte virou serif depois de ativar o WP Rocket?

Porque o recurso Remove Unused CSS considerou a regra que carrega a fonte como CSS não usado e a removeu do Used CSS gravado pelo plugin. Sem essa regra, o navegador aplica a fonte de fallback (serif ou Arial). Adicionar o seletor da fonte ao campo CSS safelist instrui o WP Rocket a preservar a regra e devolve a tipografia correta.

Como confirmo que o WP Rocket e o culpado e não o tema?

Adicione o parametro de bypass ao final da URL da página afetada e recarregue. Ele carrega a página sem nenhuma otimização do WP Rocket. Se a fonte correta voltar a aparecer, a causa esta na otimização de CSS do plugin, e não no tema nem em outro lugar.

Onde fica o campo CSS safelist no WP Rocket?

Em WP Rocket -> File Optimization -> CSS Files, dentro da seção Optimize CSS delivery, com o Remove Unused CSS ligado. O campo CSS safelist e uma caixa de texto onde você cola, um por linha, os seletores e as regras que o plugin deve preservar mesmo que pareçam sem uso, como a regra font-face e a classe da fonte do tema.

O que devo colocar no CSS safelist para salvar a fonte?

Coloque a regra font-face e o seletor que aplica a font-family no tema, descoberto no console do navegador. Use uma linha para cada item. Se a fonte do tema for aplicada em body, títulos e textos, adicione esses seletores também. Depois de salvar, limpe o Used CSS para o plugin regenerar o cache já com as regras preservadas.

Devo usar o Self-host Google Fonts do WP Rocket?

Sim, hospedar as fontes localmente reduz requisicoes a servidores do Google e melhora a privacidade. O cuidado e não manter dois plugins fazendo isso ao mesmo tempo. Se já usa OMGF ou Perfmatters para hospedar Google Fonts, escolha apenas um responsável, porque duas fontes concorrentes podem sobrescrever uma a outra e quebrar a tipografia.

A fonte aparece e some num piscar, o que e isso?

E o flash de texto sem estilo, quando o navegador mostra a fonte de fallback antes de baixar a fonte real. Costuma acontecer quando o preload da fonte foi removido junto com o CSS otimizado. Ative o preload do arquivo .woff2 principal para a fonte correta aparecer já na primeira pintura da página.

Corrigi o safelist mas a fonte continua errada, e agora?

Limpe o Used CSS em WP Rocket -> Dashboard com Clear Used CSS e depois Clear and preload cache, porque o cache antigo ainda aponta para a regra removida. Recarregue com recarga forte. Se persistir, confira no console se o arquivo .woff2 carrega com status 200 e se outro plugin de fontes não esta sobrescrevendo a regra.

Preciso desligar o Remove Unused CSS para resolver?

Não na maioria dos casos. Desligar resolve, mas você perde o ganho de PageSpeed que o recurso traz. O caminho recomendado e manter o Remove Unused CSS ligado e adicionar os seletores da fonte ao CSS safelist, preservando so o necessário e mantendo o restante do CSS otimizado.

Atenção

Como corrigir o erro de carregamento de fontes no WordPress

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.

Atenção

Como corrigir a exclusão de páginas do cache no WP Rocket no WordPress

A exclusão de uma página do cache no WP Rocket não funciona quando o padrão de URL no campo Never Cache URL(s) está mal formatado, quando um cache de servidor ou CDN fica acima do plugin, ou quando o Preload recacheia a página logo após a limpeza.

Atenção

Como corrigir o erro Rocket-Nginx Not Working no WordPress

O erro Rocket-Nginx not working acontece quando o Nginx deixa de servir as páginas em cache do WP Rocket direto do disco, geralmente porque o include do default.conf não esta no server block, o rocket-parser.php não foi rodado após editar o .ini, ou alguma condicao de bypass (query string, cookie, requisicao POST) impede o HIT.

Atenção

Como corrigir o editor lento pelo Heartbeat Control do Perfmatters no WordPress

O Heartbeat Control do Perfmatters deixa o editor lento quando a frequencia do Heartbeat e alongada demais ou o Heartbeat e bloqueado dentro do editor de posts, atrasando o autosave, o bloqueio de post e as atualizações em tempo real do WordPress.

Atenção

Como corrigir imagens sem lazy loading no WordPress

Imagens sem lazy loading no WordPress significam que o navegador baixa todas as imagens da página de uma vez, inclusive as que estão abaixo da dobra. Costuma vir de tema antigo que remove o atributo loading, plugin que desativa o recurso nativo ou imagens inseridas direto no HTML sem o atributo.

Grave

Como corrigir o conflito de nonce expirado entre WP Rocket e reCAPTCHA

O nonce do reCAPTCHA expira com o WP Rocket quando a página do formulário é entregue do cache com um token de segurança gerado horas antes. O visitante envia esse nonce já vencido, o reCAPTCHA ou o formulário rejeita a verificação e a submissão falha, mesmo o usuário sendo humano.

Setores

Extensões

Integrações

Como corrigir o erro de fontes do Google no WP Rocket

O que é erro de fontes do Google no WP Rocket?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o erro de carregamento de fontes no WordPress

Como corrigir a exclusão de páginas do cache no WP Rocket no WordPress

Como corrigir o erro Rocket-Nginx Not Working no WordPress

Como corrigir o editor lento pelo Heartbeat Control do Perfmatters no WordPress

Como corrigir imagens sem lazy loading no WordPress

Como corrigir o conflito de nonce expirado entre WP Rocket e reCAPTCHA

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