Fontes Google Elementor Perfmatters: corrigir o erro

Tipo Page Builders

Nome do erro Fontes do Google nao carregam entre Elementor e Perfmatters EN: Google Fonts not loading with Elementor and Perfmatters

Severidade Atenção

Descrição O erro de fontes Google entre Elementor e Perfmatters acontece quando as opções Disable Google Fonts ou Remove Unused CSS do Perfmatters removem os arquivos de fonte que o Elementor carrega, fazendo a tipografia trocar para a fonte padrão do sistema ou desaparecer no frontend.

O que é erro de fontes Google entre Elementor e Perfmatters?

O erro de fontes Google entre Elementor e Perfmatters surge porque os dois plugins tocam na mesma camada do site: o Elementor enfileira as fontes Google definidas nas Site Settings (Fontes Globais) e na tipografia de cada widget, enquanto o Perfmatters tem opções de otimização que justamente removem ou substituem essas fontes para deixar a página mais leve. Quando essas opções agem sobre as fontes que o Elementor precisa, a tipografia do site quebra: títulos e textos aparecem em uma fonte serifada padrão do navegador, em vez da fonte que você escolheu no editor.

Na prática, três opções do Perfmatters costumam causar isso. A opção Disable Google Fonts, na aba Fonts, bloqueia toda requisicao a fonts.googleapis.com, inclusive a que o Elementor faz. A opção Local Google Fonts baixa e auto-hospeda as fontes, mudando a URL de origem que o Elementor esperava. E o Remove Unused CSS, na aba Assets, pode remover o CSS do Elementor que contem as regras font-family e font-face, deixando o texto sem a fonte aplicada. Entender qual opção esta ativa e o primeiro passo para corrigir.

Como identificar

Após ativar o Perfmatters, os títulos e paragrafos feitos no Elementor passam a aparecer em uma fonte serifada padrão (Times New Roman ou similar) no frontend, mas continuam corretos dentro do editor do Elementor.
A tipografia muda so no visitante final: no editor do Elementor a fonte Google escolhida aparece certa, porque o editor não passa pela otimização do Perfmatters.
No painel de Rede do navegador (F12 -> Network), a requisicao a ‘fonts.googleapis.com’ some ou retorna bloqueada depois que o Perfmatters fica ativo.
Ha um breve flash de fonte errada ao carregar a página (FOUT) e a fonte nunca chega na fonte final, ficando na fallback do sistema.
Ao desativar o Perfmatters, a fonte do Elementor volta ao normal imediatamente, confirmando que a otimização e que esta removendo a fonte.

Antes de começar: Antes de alterar as opções de fontes e de Remove Unused CSS, ou de aplicar o snippet, faça um backup do site ou teste primeiro em um ambiente de staging. Mudancas no carregamento de CSS e fontes afetam todas as páginas e podem exigir limpeza de cache para reverter com segurança.

Como prevenir

Antes de ligar Disable Google Fonts ou Local Google Fonts no Perfmatters, mapeie quais fontes o Elementor usa nas Site Settings e teste a página em staging para confirmar que a tipografia continua igual.
Prefira a opção Local Google Fonts a Disable Google Fonts: você ganha performance auto-hospedando as fontes sem cortar a tipografia que o Elementor precisa.
Ao usar Remove Unused CSS, mantenha os handles do Elementor na lista de exclusão desde o inicio, para que o CSS de fonte nunca seja removido por engano.
Sempre que trocar a fonte global no Elementor, regenere as fontes locais do Perfmatters e o Used CSS, para que a otimização acompanhe a nova tipografia.

Causa

A opção Disable Google Fonts do Perfmatters, na aba Fonts, esta ligada: ela bloqueia toda requisicao a fonts.googleapis.com, inclusive a que o Elementor dispara para carregar as Fontes Globais e a tipografia dos widgets.
A opção Local Google Fonts do Perfmatters foi ativada e auto-hospedou as fontes, mas o Elementor continua referenciando a URL remota do Google, gerando divergencia entre a fonte que o Elementor pede e a que esta servida localmente.
O Remove Unused CSS do Perfmatters, na aba Assets, marcou o CSS do Elementor como não usado e o removeu da página, apagando as regras font-family e @font-face que aplicavam a fonte aos títulos e textos.
A fonte usada no Elementor e uma Custom Font (upload manual em Elementor -> Custom Fonts) e o Perfmatters, ao mover as fontes para local ou remover CSS, descartou o @font-face dessa fonte personalizada.
O Used CSS do Perfmatters foi gerado a partir de uma versão da página sem a fonte aplicada (por exemplo, com cache antigo), congelando um CSS otimizado que não inclui a tipografia do Elementor.

Como resolver

Confirme que o culpado e o Perfmatters: Antes de mexer em opções, prove a origem. Desative o Perfmatters e recarregue uma página do frontend com a aba anonima. Se a fonte do Elementor voltar ao normal, o problema esta nas opções de otimização de fontes ou de CSS do Perfmatters, e não no Elementor.
```
Painel WP -> Plugins -> desative o Perfmatters
Abra a página no frontend em uma aba anonima e confira a fonte
Reative o Perfmatters para seguir o ajuste fino
```
Ajuste a opção Disable Google Fonts na aba Fonts: Va em Configurações -> Perfmatters -> Fonts. Se a opção Disable Google Fonts estiver ligada, ela bloqueia a fonte que o Elementor carrega. Desligue-a para manter as fontes Google, ou prefira a opção Local Google Fonts no próximo passo para ganhar performance sem perder a tipografia.
```
Painel WP -> Configurações -> Perfmatters -> aba Fonts
Desligue a opção 'Disable Google Fonts'
Salve e limpe o cache do site antes de testar
```
Use Local Google Fonts e regenere os arquivos: Para manter a otimização sem quebrar o Elementor, ligue a opção Local Google Fonts na aba Fonts: o Perfmatters baixa as fontes e as serve do seu domínio. Após ligar, clique para regenerar/atualizar as fontes locais para que ele recapture as fontes que o Elementor usa nesta versão do site.
```
Painel WP -> Configurações -> Perfmatters -> aba Fonts
Ligue a opção 'Local Google Fonts'
Clique em 'Update/Regenerate Local Fonts' para recapturar as fontes do Elementor
```
Libere o CSS do Elementor no Remove Unused CSS: Se você usa o Remove Unused CSS na aba Assets, ele pode ter removido o CSS de fonte do Elementor. Adicione os handles do Elementor a lista de CSS excluido (allowlist) e limpe o Used CSS para regenerar com a tipografia presente.
```
Painel WP -> Configurações -> Perfmatters -> aba Assets -> Remove Unused CSS
Adicione na exclusão (Stylesheets to Exclude) os handles 'elementor-frontend' e 'elementor-post'
Clique em 'Clear Used CSS' para regenerar o CSS otimizado
```
Limpe todos os caches e revalide o frontend: As mudancas de fonte e de CSS so aparecem depois que o cache e reconstruido. Limpe o cache do Perfmatters e do seu plugin de cache, e regenere o CSS do Elementor para forcar o recarregamento das fontes corretas.
```
Painel WP -> Elementor -> Ferramentas -> 'Regenerate CSS & Data'
Limpe o cache do plugin de cache e do Perfmatters
Abra o frontend em aba anonima e confirme a fonte (F12 -> Network -> filtre por 'font')
```

PHP

<?php
// Garante que o CSS de fonte do Elementor nunca seja removido pela
// otimizacao do Perfmatters (Remove Unused CSS).
add_filter( 'perfmatters_rucss_excluded_stylesheets', 'full_keep_elementor_fonts' );
function full_keep_elementor_fonts( $excluded ) {
    $excluded[] = 'elementor-frontend';
    $excluded[] = 'elementor-post';
    $excluded[] = 'google-fonts-1';
    return $excluded;
}

Perguntas frequentes

Por que as fontes do Elementor mudaram depois que ativei o Perfmatters

Quase sempre porque a opção Disable Google Fonts do Perfmatters esta ligada e bloqueou a fonte que o Elementor carregava, ou porque o Remove Unused CSS removeu o CSS de fonte do Elementor. Desligue o Disable Google Fonts ou exclua os handles do Elementor do Remove Unused CSS e limpe o cache.

Posso usar o Local Google Fonts do Perfmatters com o Elementor

Sim, e a opção recomendada. O Local Google Fonts baixa e auto-hospeda as fontes do seu domínio, mantendo a tipografia do Elementor e ainda ganhando performance. Depois de ligar, regenere as fontes locais para que ele capture as fontes que o Elementor usa na versão atual do site.

Por que a fonte aparece certa no editor do Elementor mas errada no site

O editor do Elementor não passa pela otimização do Perfmatters, entao mostra a fonte real. No frontend, o Perfmatters aplica Disable Google Fonts ou Remove Unused CSS e remove a fonte, deixando a fallback do sistema. Ajuste essas opções e limpe o cache para igualar editor e site.

O Remove Unused CSS do Perfmatters pode apagar a fonte do Elementor

Pode. Se o Remove Unused CSS marcar o CSS do Elementor como não usado, ele remove as regras font-family e font-face. Adicione os handles 'elementor-frontend' e 'elementor-post' a lista de CSS excluido e clique em Clear Used CSS para regenerar com a fonte presente.

Preciso desativar o Perfmatters para resolver o erro de fontes

Não. Desative apenas para confirmar a origem do problema. A correção definitiva e ajustar as opções de fontes e de CSS do Perfmatters, trocando Disable Google Fonts por Local Google Fonts e excluindo o CSS do Elementor do Remove Unused CSS, mantendo os dois plugins ativos.

Como confirmar se a fonte Google esta sendo bloqueada

Abra o site no frontend, pressione F12 para abrir as ferramentas do navegador e va na aba Network filtrando por font. Se a requisicao a fonts.googleapis.com sumiu ou aparece bloqueada com o Perfmatters ativo, o Disable Google Fonts e o responsável.

O erro também afeta as Custom Fonts que subi no Elementor

Sim. Se você subiu uma fonte própria em Elementor e Custom Fonts, o Remove Unused CSS pode descartar o @font-face dessa fonte ao otimizar o CSS. Exclua o CSS do Elementor da otimização e regenere o Used CSS para preservar a fonte personalizada.

Depois de ajustar o Perfmatters a fonte ainda não volta, o que faço

O cache antigo costuma manter a versão sem fonte. Va em Elementor e Ferramentas e use Regenerate CSS and Data, limpe o cache do Perfmatters e do plugin de cache, e regenere o Used CSS. Em seguida revalide o frontend em uma aba anonima.

Grave

Como corrigir Divi Builder que não carrega

O Divi Builder que não carrega trava na animacao de carregamento do Visual Builder ou abre a tela em branco ao editar uma página. A causa quase sempre e o JavaScript do builder bloqueado por minificacao ou cache, memória PHP insuficiente, ou a versão do tema Divi incompativel com o plugin Divi Builder.

Informativo

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Quando o estilo do WPForms não aplica com o Astra Pro, o formulário aparece sem CSS porque a opção Include Form Styling esta em No styling, o CSS do tema vence por especificidade, ou o cache combinou e removeu a folha de estilo do WPForms.

Atenção

Como corrigir o widget de galeria do Elementor que não carrega imagens no WordPress

A galeria do Elementor não carrega imagens quando o tamanho de miniatura selecionado no widget não existe na biblioteca de mídia, quando um plugin de cache ou lazy load adia o carregamento das fotos, ou quando o caminho dos arquivos quebrou após migração, CDN ou troca de domínio.

Grave

Como corrigir o Repeater Field que não salva dados no ACF PRO

O Repeater que não salva no ACF PRO quase sempre perde as últimas linhas porque o PHP descarta variáveis quando o número de campos enviados passa de max_input_vars (padrão 1000). Cada linha do Repeater vira vários campos no POST, então um Repeater grande estoura o limite e grava só parte das linhas, sem erro na tela.

Grave

Como corrigir o JetFormBuilder que não envia formulários

Quando o JetFormBuilder não envia o formulário, o problema quase sempre está na ação Send Email ausente, no Submit Type errado, num captcha mal configurado ou no envio de e-mail do WordPress sem SMTP. Cada causa tem um sintoma distinto.

Grave

Como corrigir o editor do Elementor que não carrega

Quando o editor do Elementor não carrega, ele trava na barra de carregamento ou abre em branco. A causa quase sempre é limite de memória/PHP baixo demais para o site ou um conflito com outro plugin (cache ou minificação de JavaScript).

Setores

Extensões

Integrações

Como corrigir o erro de fontes do Google entre Elementor e Perfmatters no WordPress

O que é erro de fontes Google entre Elementor e Perfmatters?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir Divi Builder que não carrega

Como corrigir os estilos do WPForms que não aplicam com o Astra Pro no WordPress

Como corrigir o widget de galeria do Elementor que não carrega imagens no WordPress

Como corrigir o Repeater Field que não salva dados no ACF PRO

Como corrigir o JetFormBuilder que não envia formulários

Como corrigir o editor do Elementor que não carrega

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