# Como corrigir fontes do Google que não carregam no Elementor

O Google Fonts no Elementor não carrega quando o CSS gerado guarda referências antigas, a opção de fontes locais baixa arquivos incompletos ou o cache serve a folha antiga. O texto cai para Arial no frontend, mesmo a fonte aparecendo certa no editor.

## O que é o erro de Google Fonts que não carregam no Elementor?

O Google Fonts no Elementor não carrega significa que a fonte escolhida na tipografia do editor não chega a ser aplicada no frontend do site, e o navegador renderiza o texto com uma fonte genérica do sistema como Arial ou Times. O Elementor injeta as fontes do Google de duas formas: por uma chamada à API do Google Fonts (fonts.googleapis.com) ou, quando a opção Load Google Fonts Locally está ligada, baixando os arquivos para a pasta wp-content/uploads/elementor/fonts e reescrevendo o CSS para apontar para esses arquivos locais. A partir da versão 3.32.1 do Elementor, esse carregamento local passou a vir desligado por padrão e precisa ser ativado. O erro surge quando essa cadeia quebra: o CSS gerado fica preso a um caminho que não existe mais, o arquivo local baixou incompleto, o cache entrega a versão antiga da folha de estilo, ou uma regra de CORS e mixed content barra o arquivo de fonte. Em todos os casos a fonte existe e está configurada, mas não é aplicada na página pública.

## Como identificar

- O texto do site abre numa fonte genérica como Arial ou Times no frontend, enquanto a fonte do Google escolhida aparece correta dentro do editor do Elementor.
- No console do navegador (F12, aba Console) surge a mensagem 'Access to font at ... has been blocked by CORS policy' ou um aviso de mixed content sobre carregar a fonte por HTTP numa página HTTPS.
- Na aba Network do navegador o arquivo da fonte (woff2 ou woff) retorna status 404, indicando que o CSS aponta para um caminho que não existe na pasta de fontes do Elementor.
- A fonte volta ao normal logo após salvar a página no editor, mas torna a cair para a fonte de fallback depois de alguns minutos ou após uma limpeza de cache.
- Depois de ativar ou desativar a opção Load Google Fonts Locally, o site passa a exibir a fonte errada até o CSS ser regenerado.

**Antes de começar:** Antes de editar o .htaccess ou a configuração do Nginx para liberar o cabeçalho de CORS, faça backup do arquivo, porque um erro de sintaxe pode derrubar o site inteiro. Libere o Access-Control-Allow-Origin apenas para o domínio do seu site, evitando o coringa em produção.

## Como prevenir

- Sempre que trocar a tipografia de um site grande, rode Regenerate Files & Data logo em seguida para o CSS nascer já com o @font-face correto
- Ao ativar o carregamento local das fontes, confira a pasta wp-content/uploads/elementor/fonts para garantir que os arquivos woff2 baixaram completos antes de publicar
- Inclua a limpeza do cache de página e do CDN na sua rotina de publicação, para o site nunca servir uma folha de estilo antiga sem a fonte nova
- Mantenha o site inteiramente em HTTPS e revise os endereços do site após qualquer migração, para evitar bloqueios de mixed content nas fontes

Erros relacionados

- [Como corrigir o erro de CORS de fontes no Elementor](https://full.services/wp-fixer/corrigir-cors-fontes-elementor/)
- [Como corrigir ícones do Font Awesome que não aparecem no Elementor](https://full.services/wp-fixer/corrigir-font-awesome-elementor/)
- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)

## Causa

- O CSS gerado pelo Elementor está desatualizado e ainda aponta para um @font-face ou um caminho de fonte que mudou, situação resolvida em Elementor, aba Tools, com Regenerate Files and Data.
- A opção Load Google Fonts Locally (Elementor, Settings, aba Features) baixou os arquivos de forma incompleta para wp-content/uploads/elementor/fonts, deixando o woff2 ausente e o CSS apontando para um 404.
- Um plugin de cache ou de otimização (WP Rocket, LiteSpeed, W3 Total Cache) serve a folha de estilo antiga, sem o @font-face atualizado, mesmo após a fonte ter sido trocada no editor.
- A página é servida em HTTPS mas a chamada das fontes do Google ou o arquivo local é referenciado em HTTP, e o navegador bloqueia por mixed content.
- O arquivo de fonte é servido de um CDN ou subdomínio sem o cabeçalho Access-Control-Allow-Origin, então o navegador baixa o arquivo mas se recusa a aplicá-lo por política de CORS.
- Um plugin de privacidade ou de remoção de Google Fonts (instalado por causa da LGPD ou do GDPR) intercepta e bloqueia a chamada a fonts.googleapis.com, deixando a fonte sem origem.

## Como resolver

1. Confirme onde a fonte quebra pelo console: abra o site publicado, pressione F12 e leia as abas Console e Network. O Console mostra se o bloqueio é de CORS ou de mixed content, e a aba Network mostra se o arquivo de fonte retorna 404 ou 200. Anote o caminho exato do arquivo de fonte para saber se ele aponta para a pasta local do Elementor ou para um host externo.
2. Regenere o CSS e os arquivos do Elementor: no painel do WordPress, vá no menu do Elementor e abra a aba de ferramentas para forçar a reconstrução das folhas de estilo, que é o que remove referências antigas de fonte. Use o caminho de menu abaixo e clique no botão de regenerar.

```
Elementor -> Tools -> General -> Regenerate Files & Data
```

3. Reveja a opção de carregamento local das fontes: ainda no Elementor, abra as configurações e veja a aba de recursos, onde fica a opção que baixa as fontes do Google para o seu servidor. Se ela estiver ligada e a fonte não carrega, desligue, salve e regenere o CSS para voltar a servir pela API do Google; se preferir manter local, desligue e ligue de novo para forçar um novo download dos arquivos na pasta de fontes. Os caminhos abaixo localizam a opção e a pasta.

```
Elementor -> Settings -> Features -> Load Google Fonts Locally
wp-content/uploads/elementor/fonts
```

4. Limpe o cache do site e do navegador: depois de regenerar o CSS, limpe o cache do plugin de cache, o cache do CDN e o cache do navegador, senão o site continua servindo a folha de estilo antiga sem o @font-face correto. Recarregue o frontend sem cache para conferir a fonte. Os caminhos abaixo são os pontos de limpeza mais comuns.

```
WP Rocket -> Limpar cache
LiteSpeed Cache -> Toolbox -> Purge All
Ctrl + F5 (recarregar sem cache no navegador)
```

5. Trate CORS, mixed content ou bloqueio por plugin: se o Console acusou CORS, libere o cabeçalho Access-Control-Allow-Origin para as extensões de fonte no servidor. Se acusou mixed content, force HTTPS no site para que a fonte seja pedida pelo mesmo protocolo. Se houver um plugin de privacidade que remove o Google Fonts, ajuste-o para hospedar a fonte localmente em vez de bloquear a chamada. Os alvos abaixo apontam onde agir.

```
Header set Access-Control-Allow-Origin (.htaccess ou bloco server do Nginx)
Configurações -> Geral -> Endereço do site (forçar https://)
```


## Código

```php
<?php
// Força o Elementor a regerar o CSS das fontes ao detectar versão nova.
// Cole no functions.php do tema filho ou num plugin de snippets.
// Roda uma vez por carga de admin e limpa o cache de CSS do Elementor.
add_action( 'admin_init', function () {
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}
	if ( ! class_exists( 'ElementorPlugin' ) ) {
		return;
	}
	// Apaga os arquivos CSS gerados (inclui os @font-face antigos).
	ElementorPlugin::$instance->files_manager->clear_cache();
}, 20 );
```

## Perguntas frequentes

### Por que a fonte do Google aparece certa no editor do Elementor mas não no site

Porque o editor carrega a fonte direto da API do Google no contexto de edição, enquanto o frontend depende do CSS gerado pelo Elementor. Se esse CSS está desatualizado, aponta para um arquivo local que baixou incompleto, ou o cache serve a versão antiga, o navegador não encontra a fonte e cai para uma fonte de fallback como Arial.

### Onde o Elementor guarda as fontes do Google quando o carregamento local está ligado

Quando a opção Load Google Fonts Locally está ativa, o Elementor baixa os arquivos e os grava em wp-content/uploads/elementor/fonts, reescrevendo o CSS para apontar para esses arquivos. Se algum arquivo nessa pasta baixou incompleto ou foi apagado, o CSS aponta para um 404 e a fonte não é aplicada.

### Regenerar os arquivos do Elementor apaga o meu conteúdo ou design

Não. O Regenerate Files & Data, na aba Tools do Elementor, apenas reconstrói os arquivos de CSS e os dados em cache a partir do que você já desenhou. Ele não altera o conteúdo das páginas nem o layout, só recria as folhas de estilo, o que costuma resolver fontes presas a referências antigas.

### A versão 3.32.1 do Elementor mudou alguma coisa no carregamento de fontes

Sim. A partir da versão 3.32.1, o carregamento local das fontes do Google passou a vir desligado por padrão, então sites que dependiam desse recurso podem ver a fonte mudar após a atualização. Para manter o comportamento anterior, basta reativar a opção em Elementor, Settings, aba Features, e regenerar o CSS.

### O erro de CORS quer dizer que a fonte do Google não existe

Não. Numa falha de CORS o arquivo de fonte costuma retornar status 200 na aba Network, ou seja, existe e respondeu. O problema é de política: a resposta veio sem o cabeçalho Access-Control-Allow-Origin liberando a origem do site, então o navegador baixa o arquivo mas se recusa a aplicá-lo na página.

### Um plugin de LGPD que remove o Google Fonts pode causar isso

Pode. Plugins de privacidade instalados para cumprir LGPD ou GDPR às vezes bloqueiam a chamada a fonts.googleapis.com para não enviar o IP do visitante ao Google. Se esse plugin não hospedar a fonte localmente como substituto, o texto fica sem a fonte e cai para o fallback. A solução é configurar o plugin para servir a fonte do seu próprio servidor.

### Limpar só o cache resolve a fonte do Google que não carrega

Às vezes sim, quando a única causa era o cache servindo a folha de estilo antiga. Mas se o CSS gerado está desatualizado ou o arquivo local baixou incompleto, limpar o cache não basta. O caminho mais confiável é primeiro regenerar os arquivos do Elementor e só depois limpar o cache de página, do CDN e do navegador.

### Como confirmo que a fonte voltou a carregar no frontend

Abra o site publicado, pressione F12, vá na aba Network e recarregue sem cache. O arquivo da fonte deve retornar status 200 e, na aba Elements, o texto deve usar a família escolhida em vez de uma fonte de fallback. Conferir num navegador anônimo também ajuda a descartar cache local do navegador.

**Fonte:** [Elementor — Troubleshooting: Fonts not appearing on frontend](https://elementor.com/help/troubleshooting-fonts-not-appearing-on-frontend/)