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.

O que é o erro de CORS de fontes no Elementor?

O navegador trata fontes carregadas via @font-face com regras de origem cruzada (CORS): se a URL da fonte aponta para um host diferente do site, o servidor da fonte precisa responder com o cabeçalho Access-Control-Allow-Origin liberando a origem do site. Sem esse cabeçalho, o navegador baixa o arquivo mas se recusa a aplica-lo, e o texto renderiza com a fonte de fallback do sistema. No Elementor isso aparece quando as Fontes Personalizadas (Elementor Pro) ou o Google Fonts em modo de auto-hospedagem ficam num CDN ou subdominio estático separado do domínio principal: o arquivo woff2 esta la, retorna 200, mas vem sem o cabeçalho de CORS, entao a tipografia configurada no editor simplesmente não aparece no frontend.

Como identificar

O console do navegador mostra a mensagem ‘Access to font at … has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource’.
O texto do site abre numa fonte generica (Arial ou Times) em vez da fonte escolhida no Elementor, mesmo a fonte aparecendo certa dentro do editor.
Na aba Network do navegador, o arquivo woff2 ou woff retorna status 200, porém sem o cabeçalho Access-Control-Allow-Origin na resposta.
O problema some ao desativar o CDN ou ao acessar o site pelo domínio de origem, e volta quando os assets são servidos pelo domínio do CDN.

Antes de começar: Libere o Access-Control-Allow-Origin apenas para o domínio do seu site. Evite o coringa em producao quando houver conteúdo sensivel, porque ele autoriza qualquer origem a consumir os recursos. Faca backup do .htaccess ou do arquivo de configuração do Nginx antes de editar, pois um erro de sintaxe pode derrubar o site.

Como prevenir

Sirva as fontes do mesmo domínio do site sempre que possível, para o navegador nem aplicar regras de origem cruzada
Ao configurar um CDN, inclua as extensões woff2, woff e ttf nas regras que repassam o cabeçalho Access-Control-Allow-Origin
Depois de cada troca de domínio ou de http para https, revise o valor do Access-Control-Allow-Origin para que ele bata com a origem real do site

Causa

Arquivo de fonte (woff2, woff, ttf) servido por um CDN ou subdominio estático cujo domínio difere da origem do site, sem o cabeçalho Access-Control-Allow-Origin liberando essa origem.
Fontes Personalizadas do Elementor Pro hospedadas em wp-content/uploads e reescritas para um host de CDN que não propaga o cabeçalho de CORS para tipos de fonte.
Google Fonts em modo de auto-hospedagem (Improve Google Fonts Loading) gravados em uploads/elementor/google-fonts e entregues por um proxy de cache em domínio diferente sem CORS.
Regra de servidor (Apache mod_headers ou bloco de location do Nginx) que aplica Access-Control-Allow-Origin apenas a imagens e ignora as extensões woff2, woff e ttf.
Cabeçalho Access-Control-Allow-Origin fixado em um valor de origem antigo (http em vez de https, ou domínio sem www) que não bate com a origem real do navegador.

Como resolver

Confirme a origem da fonte bloqueada: abra o site, pressione F12, va na aba Console e leia a mensagem de CORS: ela mostra a URL exata da fonte e a origem que foi bloqueada. Anote o host que serve a fonte (CDN ou subdominio) para liberar so ele.
Libere o cabeçalho de CORS para fontes no Apache: se o servidor usa Apache, edite o .htaccess da raiz do WordPress e adicione, acima do bloco BEGIN WordPress, a regra que envia Access-Control-Allow-Origin com o domínio do seu site para as extensões de fonte. O bloco completo, pronto para colar, esta na seção de código desta página. Os caminhos abaixo localizam o arquivo a editar.
```
.htaccess
wp-content/uploads/elementor
```
Ou libere no Nginx: se o servidor usa Nginx, edite a configuração do site e adicione, no bloco server, um location para as extensões de fonte com a diretiva add_header Access-Control-Allow-Origin apontando para o domínio do seu site mais a diretiva Vary Origin. Depois teste a sintaxe e recarregue o serviço com os comandos abaixo.
```
nginx -t
systemctl reload nginx
```
Ajuste o CDN para repassar o cabeçalho: se as fontes passam por um CDN, ative no painel do CDN a opção que respeita ou repassa o cabeçalho de origem (forward Access-Control-Allow-Origin) e limpe o cache do CDN, senao ele continua servindo a versão antiga sem CORS.
Hospede as fontes no mesmo domínio: como alternativa definitiva, sirva as fontes da mesma origem do site. No Elementor, ative a auto-hospedagem do Google Fonts e exclua a pasta de fontes da reescrita de URL do CDN, para que o navegador busque a fonte na origem e nem aplique CORS.
```
wp-content/uploads/elementor/css
wp-content/uploads/elementor/google-fonts
```

APACHE

# Cabecalho de CORS so para arquivos de fonte (Apache)
# Cole no topo do .htaccess da raiz do WordPress, antes do bloco # BEGIN WordPress.
<IfModule mod_headers.c>
  <FilesMatch ".(woff2?|ttf|otf|eot|svg)$">
    Header set Access-Control-Allow-Origin "https://seusite.com.br"
    Header set Access-Control-Allow-Methods "GET"
    Header set Vary "Origin"
  </FilesMatch>
</IfModule>

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 permissão e o bloqueio continua.

Grave

Como corrigir o Google Map Field do ACF PRO (erro de Google Maps API)

O Google Map Field do ACF PRO renderiza um mapa cinza ou vazio quando não ha uma chave da Google Maps JavaScript API registrada no WordPress, ou quando a chave existe mas as APIs e restricoes do Google Cloud estão incorretas.

Informativo

Como corrigir o erro do widget Team Member no Happy Addons no WordPress

O widget Team Member do Happy Addons não funciona quando ele está desligado no Feature Controller, quando o On Demand Asset Loading não carrega o CSS e o JS do widget, ou quando a foto e os ícones sociais não foram configurados corretamente no painel do Elementor.

Atenção

Como corrigir o erro do Image Grid no Happy Addons

O erro do Image Grid no Happy Addons acontece quando o widget está desativado no Feature Controller, o Elementor está desatualizado ou um cache antigo serve o CSS e o JavaScript errados, fazendo o widget sumir do editor, as imagens não aparecerem ou o layout masonry quebrar.

Atenção

Como corrigir o Flexible Content do ACF PRO que não renderiza no Elementor

O Flexible Content do ACF PRO sai em branco no Elementor porque ele e um campo de loop, não um valor simples: a Dynamic Tag ACF Field do Elementor le campos escalares (texto, imagem, link) e devolve vazio para um campo que so existe dentro de um have_rows. Para renderizar, e preciso iterar os layouts com get_row_layout e get_sub_field.

Atenção

Como corrigir o File Field do ACF PRO quando o upload não funciona

O upload do File Field do ACF PRO não funciona quando o tipo de arquivo está fora da lista permitida, o limite de tamanho rejeita o envio, a opção Library restringe a seleção, ou o Return Format escolhido não casa com o código do template, deixando o download quebrado.

Grave

Como corrigir erros de exibição de produtos do WooCommerce no Elementor

Os produtos do Elementor com WooCommerce não aparecem quando o widget de Produtos carrega vazio ou a página de produto fica sem conteúdo. As causas comuns são o Source do widget apontando para uma consulta sem itens, o template do Theme Builder publicado sem condição de exibição, ou o CSS do Elementor desatualizado.

Setores

Extensões

Integrações

Como corrigir o erro de CORS de fontes no Elementor

O que é o erro de CORS de fontes no Elementor?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o Google Map Field do ACF PRO (erro de Google Maps API)

Como corrigir o erro do widget Team Member no Happy Addons no WordPress

Como corrigir o erro do Image Grid no Happy Addons

Como corrigir o Flexible Content do ACF PRO que não renderiza no Elementor

Como corrigir o File Field do ACF PRO quando o upload não funciona

Como corrigir erros de exibição de produtos do WooCommerce no Elementor

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