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

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.

Erros relacionados

- [Como corrigir fontes do Google que não carregam no Elementor](https://full.services/wp-fixer/corrigir-google-fonts-elementor/)
- [Como corrigir o erro de CORS de fontes no Elementor](https://full.services/wp-fixer/corrigir-cors-fontes-elementor/)
- [Como corrigir conflitos entre o Elementor e plugins de cache](https://full.services/wp-fixer/corrigir-conflito-elementor-cache/)

## 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

1. 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
```

2. 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
```

3. 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
```

4. 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
```

5. 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')
```


## Código

```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.

**Fonte:** [Perfmatters Documentation](https://perfmatters.io/docs/)