Google Fonts Elementor não carrega: como corrigir

Tipo Page Builders

Nome do erro Fontes do Google não carregam no Elementor EN: Google Fonts not loading in Elementor

Severidade Atenção

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

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

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.
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
```
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
```
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)
```
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://)
```

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( '\Elementor\Plugin' ) ) {
		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.

Informativo

Como corrigir hover effects do Elementor que não funcionam no Safari

Os hover effects do Elementor não funcionam no Safari quando o navegador serve um arquivo CSS desatualizado, quando a transição depende de uma propriedade que o WebKit exige com prefixo -webkit-, ou quando o efeito é acionado por :hover em um iPhone, onde não existe ponteiro de mouse.

Atenção

Como corrigir o erro de cores no Global Color Palette do Astra Pro no WordPress

O Global Color Palette do Astra Pro não aplica quando o CSS dinâmico do tema fica preso em cache, quando a cor foi fixada manualmente no page builder ou em CSS adicional, ou quando um tema filho sobrescreve as variaveis de cor da paleta. Limpar o cache do Astra e remover os valores fixos restaura as cores em todo o site.

Grave

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

O Theme Builder não aplica em todas as páginas quando o template foi salvo como rascunho, ficou sem condicao de exibicao, ou perde para outro template do mesmo tipo com condicao mais específica. O ajuste e definir Include corretamente e revisar a especificidade entre templates concorrentes.

Atenção

Como corrigir o erro de CORS de fontes no Elementor

O erro de CORS de fontes no Elementor ocorre quando o arquivo de fonte (woff2, woff ou ttf) e servido de um domínio diferente do site (CDN, subdominio ou proxy) sem o cabeçalho Access-Control-Allow-Origin. O navegador bloqueia a fonte por origem cruzada e o texto cai numa fonte de fallback, mesmo a fonte existindo e respondendo 200.

Grave

Como corrigir o erro ‘Template Not Found’ no Elementor

O erro "Template Not Found" do Elementor surge quando o site tenta carregar um template salvo que não existe mais no banco ou que veio de outro domínio. É comum após migração ou clonagem sem rodar o Replace URL, ou quando o template referenciado foi excluído da biblioteca.

Grave

Como corrigir Dynamic Tags do Elementor que não exibem dados do ACF

As Dynamic Tags do Elementor deixam de exibir dados do ACF quando o campo sai vazio no widget dinamico do editor. As causas reais são o Elementor Pro inativo (Dynamic Tags e recurso Pro), a regra de local do grupo ACF não casar com o post editado, ou o Image Field retornar Array em vez de Image URL.

Setores

Extensões

Integrações

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

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

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir hover effects do Elementor que não funcionam no Safari

Como corrigir o erro de cores no Global Color Palette do Astra Pro no WordPress

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

Como corrigir o erro de CORS de fontes no Elementor

Como corrigir o erro ‘Template Not Found’ no Elementor

Como corrigir Dynamic Tags do Elementor que não exibem dados do ACF

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