Elementor erro de CORS em fontes: como corrigir

Tipo Page Builders

Nome do erro Erro de CORS de fontes no Elementor EN: Elementor font CORS error

Severidade Atenção

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

Conteúdo exclusivo para membros Pro

Faça upgrade para acessar este item completo.

// ★ Conteúdo disponível para membros Pro...
// Faça upgrade para acessar este item.

Perguntas frequentes

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

Porque o editor carrega a fonte do mesmo contexto de edição, sem passar pela regra de origem cruzada. No frontend, quando a fonte vem de um CDN ou subdominio sem o cabeçalho Access-Control-Allow-Origin, o navegador a bloqueia e o texto cai na fonte de fallback do sistema.

O erro de CORS quer dizer que a fonte não foi encontrada

Não. Na aba Network a fonte costuma retornar status 200, ou seja, ela existe e respondeu. O bloqueio e de politica: a resposta veio sem o cabeçalho Access-Control-Allow-Origin liberando a origem do site, entao o navegador baixa o arquivo mas se recusa a aplica-lo na página.

Posso usar Access-Control-Allow-Origin com coringa para resolver rápido

Funciona, mas não e recomendado em producao porque autoriza qualquer site a consumir suas fontes e recursos. O ideal e informar o domínio exato do seu site, em HTTPS, e usar o coringa apenas como teste pontual para confirmar que a causa e mesmo CORS.

Onde o Elementor guarda as fontes auto-hospedadas

As Fontes Personalizadas do Elementor Pro ficam na biblioteca de mídia, e o Google Fonts em modo de auto-hospedagem e gravado em wp-content/uploads/elementor/google-fonts. Se algum desses caminhos for reescrito para um host de CDN sem CORS, surge o bloqueio de origem cruzada.

Como confirmo que o cabeçalho de CORS foi aplicado

Abra o F12, va na aba Network, recarregue a página e clique no arquivo da fonte. Em Response Headers deve aparecer Access-Control-Allow-Origin com o domínio do seu site. Se aparecer, recarregue sem cache para ver a tipografia correta voltar ao frontend.

Hospedar a fonte no próprio domínio elimina o erro de CORS

Sim. Quando a fonte e servida da mesma origem do site, o navegador nem aplica a regra de origem cruzada, entao não ha cabeçalho de CORS para faltar. Por isso ativar a auto-hospedagem e excluir a pasta de fontes da reescrita do CDN e a solução mais estavel.

Limpar o cache do site resolve o erro de CORS de fontes

Sozinho, raramente. A limpeza ajuda depois que você já adicionou o cabeçalho no servidor ou no CDN, para descartar a resposta antiga sem CORS. Se o cabeçalho ainda não existe, limpar o cache não cria a permissao e o bloqueio continua.

Pro Grave

Como corrigir conflitos entre o Elementor e plugins de cache

O conflito entre Elementor e cache acontece quando um plugin de cache serve CSS, HTML ou JavaScript antigos, deixando o layout quebrado no frontend ou travando o editor. A correção envolve regenerar o CSS do Elementor, excluir o editor da otimização e limpar o cache na ordem certa.

Pro Atenção

Como corrigir o Elementor Kit que não importa corretamente

Quando um Kit do Elementor não importa corretamente, a importação trava no meio, retorna template inválido ou conclui sem trazer páginas e conteúdo. As causas reais são timeout pelo tamanho do kit, limites de PHP no upload e plugins de dependência ausentes.

Pro Grave

Como corrigir Custom Layouts que não aplicam no Astra Pro

Quando os Custom Layouts do Astra não aplicam, um cabeçalho, rodape, hook ou template do Site Builder do Astra Pro fica invisivel em páginas especificas, mesmo salvo. A causa quase sempre esta nas Display Rules: alvo errado em Display On, exclusão em Do Not Display On vencendo, ou outro layout com prioridade maior assumindo o local.

Pro Grave

Como corrigir Elementor com tela cinza ou carregando infinito

O Elementor com tela cinza ou carregando infinito mostra o painel de widgets à esquerda, mas a área de preview fica cinza e nunca renderiza a página. A causa quase sempre é o JavaScript do preview bloqueado por minificação/cache, um conflito de plugin ou tema, ou a URL do site inconsistente (http e https misturados).

Pro Atenção

Como corrigir o Google Maps Field no ACF PRO (chave de API)

O Google Maps Field do ACF PRO exige uma chave de API do Google registrada via filtro acf/fields/google_map/api ou acf_update_setting. Sem ela, o campo mostra um mapa cinza e o console acusa erro da Google Maps JavaScript API.

Pro Grave

Como corrigir a incompatibilidade entre JetThemeCore e Astra

A incompatibilidade entre JetThemeCore e Astra aparece quando o Theme Builder do Crocoblock não consegue substituir o cabeçalho, o rodape ou o body do Astra, e a página sai com o layout nativo do tema em vez do template criado. O Override theme header, body e footer parece não ter efeito e o template publicado e ignorado no front-end.

Setores

Extensões

Integrações

Como corrigir o erro de CORS de fontes no Elementor

Conteúdo exclusivo para membros Pro

Perguntas frequentes

Itens relacionados

Como corrigir conflitos entre o Elementor e plugins de cache

Como corrigir o Elementor Kit que não importa corretamente

Como corrigir Custom Layouts que não aplicam no Astra Pro

Como corrigir Elementor com tela cinza ou carregando infinito

Como corrigir o Google Maps Field no ACF PRO (chave de API)

Como corrigir a incompatibilidade entre JetThemeCore e Astra

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