Perfmatters Astra Pro fontes: corrigir conflito no WordPress

Tipo Performance & Velocidade

Nome do erro Conflito de fontes entre Perfmatters e Astra Pro EN: Font conflict between Perfmatters and Astra Pro

Severidade Atenção

Descrição O conflito de fontes entre Perfmatters e Astra Pro acontece quando as opções de fonte do Perfmatters (Disable Google Fonts, Local Google Fonts e Remove Unused CSS) bloqueiam ou hospedam localmente as fontes que o Astra Pro carrega pela tipografia do Customizer, fazendo a tipografia mudar, sumir ou voltar para a fonte de sistema.

O que é conflito de fontes entre Perfmatters e Astra Pro?

O conflito de fontes entre Perfmatters e Astra Pro surge porque os dois plugins atuam sobre a mesma camada de tipografia, mas com objetivos diferentes. O Astra Pro carrega as fontes definidas no Customizer (Aparencia, Personalizar, Tipografia), normalmente Google Fonts servidas pelos servidores do Google e enfileiradas no cabeçalho da página. O Perfmatters, por sua vez, oferece opções de performance que interceptam exatamente esse carregamento: Disable Google Fonts, Local Google Fonts e Remove Unused CSS.

Quando essas opções do Perfmatters são ativadas sem considerar o Astra, o resultado e a tipografia do tema deixar de aparecer como configurada. Com Disable Google Fonts ligado, a requisicao da fonte do Astra e removida e o navegador cai para a fonte de sistema (fallback). Com Local Google Fonts, a fonte passa a ser servida do seu próprio servidor, o que pode quebrar se o Astra usar uma variante (peso ou estilo) que não foi baixada. E com Remove Unused CSS, regras de @font-face do Astra podem ser cortadas como se fossem CSS não utilizado, derrubando a renderizacao da fonte.

Como identificar

Depois de ativar o Perfmatters, o site volta a exibir a fonte de sistema (Arial ou Times) no lugar da fonte configurada no Astra Pro.
A tipografia aparece correta por um instante e depois muda, ou pisca, durante o carregamento da página (flash of unstyled text).
Apenas alguns pesos ou estilos da fonte saem errados, por exemplo o negrito ou o italico aparecem como fonte padrão enquanto o regular fica certo.
No painel de rede do navegador (F12, aba Network) a requisicao para fonts.googleapis.com ou fonts.gstatic.com não aparece mais depois que o Perfmatters foi ativado.
Icones de fonte do tema ou de plugins (icon fonts) somem ou viram quadrados após ativar Remove Unused CSS no Perfmatters.

Antes de começar: Antes de mexer nas opções de fonte do Perfmatters ou na tipografia do Astra em producao, faça um backup do site ou teste primeiro em staging, e altere uma opção por vez para conseguir reverter caso a fonte quebre.

Como prevenir

Defina uma única fonte de verdade para a tipografia: ou o Astra carrega as Google Fonts, ou o Perfmatters as hospeda localmente, nunca os dois competindo pela mesma fonte.
Ao ativar Local Google Fonts no Perfmatters, confira sempre todos os pesos e estilos usados pelo Astra antes de publicar, para nenhuma variante cair em fallback.
Ative o Remove Unused CSS com cuidado e sempre teste o site numa aba anonima, mantendo o CSS de tipografia do tema na lista de exclusão quando necessário.
Limpe o cache do Perfmatters e do CDN após qualquer mudanca de fonte e valide visualmente antes de considerar o ajuste concluido.

Causa

A opção Disable Google Fonts do Perfmatters esta ativada e remove a requisicao das Google Fonts que o Astra Pro enfileira pela tipografia do Customizer, fazendo o navegador cair para a fonte de sistema.
A opção Local Google Fonts do Perfmatters esta ativada, mas a variante de peso ou estilo usada pelo Astra (por exemplo 600 ou italico) não foi baixada para o servidor local, entao essa variante específica não renderiza.
A opção Remove Unused CSS do Perfmatters corta as regras @font-face ou o CSS de tipografia injetado pelo Astra Pro por considera-lo CSS não utilizado na primeira carga, derrubando a fonte.
O Astra esta configurado para servir System Fonts ou uma fonte local enquanto o Perfmatters tenta otimizar Google Fonts inexistentes, ou o contrario, gerando uma fonte final divergente da configurada no Customizer.
O cache de página do Perfmatters (ou de outro plugin de cache) ainda serve o HTML antigo com o link de fonte original, conflitando com o novo comportamento de fontes após a mudanca de opção.

Como resolver

Descubra qual plugin esta controlando a fonte: Abra o site numa aba anonima e inspecione a tipografia. Em Perfmatters, Options, Fonts, anote o estado de Disable Google Fonts, Local Google Fonts e (em Assets) Remove Unused CSS. Em paralelo, confira em Aparencia, Personalizar, Tipografia qual fonte o Astra define. Isso revela se o Perfmatters esta removendo, hospedando ou cortando a fonte do Astra.
```
Painel WP -> Configurações -> Perfmatters -> Fonts
Painel WP -> Aparencia -> Personalizar -> Tipografia
Navegador -> F12 -> aba Network -> filtre por 'font' e recarregue a página
```
Decida quem serve a fonte e desligue a opção conflitante: Escolha uma única fonte de verdade. Se o Astra deve servir Google Fonts, desligue Disable Google Fonts no Perfmatters. Se você prefere o Perfmatters hospedando localmente, mantenha Local Google Fonts ligado e confirme que ele cobre a fonte do Astra. Nunca deixe Disable Google Fonts e a tipografia Google do Astra ativos ao mesmo tempo.
```
Painel WP -> Configurações -> Perfmatters -> Fonts -> desligue 'Disable Google Fonts'
Ou mantenha 'Local Google Fonts' ligado e siga para o passo 3
```
Cubra todas as variantes ao usar Local Google Fonts: Se optar por hospedar local, abra a tipografia do Astra e anote a familia e cada peso ou estilo em uso (por exemplo 400, 600 e italico). Garanta que o recurso Local Google Fonts do Perfmatters baixou essas variantes; faltando uma, o Astra usa fallback so naquele peso. Use a mesma familia nos dois lados.
```
Painel WP -> Aparencia -> Personalizar -> Tipografia -> anote familia + pesos
Painel WP -> Configurações -> Perfmatters -> Fonts -> Local Google Fonts (confirme as variantes)
```
Exclua o CSS de fonte do Remove Unused CSS: Se a fonte some so com Remove Unused CSS ligado, ele esta cortando o @font-face do Astra. Adicione o handle ou seletor de tipografia do Astra na lista de exclusão do Remove Unused CSS, ou desligue o recurso para o tema e teste novamente. Assim o CSS de fonte volta a carregar na primeira pintura.
```
Painel WP -> Configurações -> Perfmatters -> Assets -> Remove Unused CSS
Adicione o seletor/handle da fonte do Astra na lista de exclusão (Excluded Stylesheets/Selectors)
```
Limpe o cache e revalide: Toda mudanca de fonte exige limpar o cache de página e o cache do navegador, senao o HTML antigo continua servindo o link de fonte anterior. Limpe o cache do Perfmatters (e de outros plugins de cache e do CDN) e recarregue o site numa aba anonima para confirmar a tipografia correta.
```
Painel WP -> Configurações -> Perfmatters -> limpe o cache (Clear Cache)
Limpe também o cache do CDN/Cloudflare se houver
Navegador -> recarregue com Ctrl+Shift+R numa aba anonima
```

PHP

<?php
/**
 * Faz preload da fonte servida localmente pelo Perfmatters/Astra para
 * reduzir o flash of unstyled text quando os dois plugins coexistem.
 * Ajuste o caminho do .woff2 para a variante exata usada pelo Astra.
 */
add_action( 'wp_head', 'full_preload_local_font', 1 );
function full_preload_local_font() {
    $font_url = content_url( '/uploads/perfmatters/fonts/inter-v13-latin-600.woff2' );
    printf(
        '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "n",
        esc_url( $font_url )
    );
}

Perguntas frequentes

Por que a fonte do Astra Pro sumiu depois que ativei o Perfmatters

Quase sempre a opção Disable Google Fonts do Perfmatters esta removendo a requisicao das Google Fonts que o Astra carrega pela tipografia do Customizer, e o navegador cai para a fonte de sistema. Desligue Disable Google Fonts ou passe a servir a fonte localmente cobrindo a mesma familia do Astra.

Devo usar Local Google Fonts do Perfmatters junto com a tipografia do Astra

Pode, mas escolha um lado so. Se o Perfmatters hospeda local, confirme que ele baixou todos os pesos e estilos que o Astra usa, senao a variante faltante volta para fallback. Use sempre a mesma familia nos dois plugins para evitar tipografia divergente.

O Remove Unused CSS do Perfmatters pode quebrar a fonte do tema

Sim. O Remove Unused CSS pode cortar regras de @font-face ou o CSS de tipografia do Astra por considera-lo não utilizado na primeira carga. Adicione o seletor ou handle de fonte do Astra na lista de exclusão do recurso, ou desligue o Remove Unused CSS e teste de novo.

A fonte aparece certa e depois muda durante o carregamento, o que e isso

Esse efeito de troca de fonte durante o carregamento e o flash of unstyled text, comum quando font-display esta como swap e a fonte real chega depois do fallback. Padronize a estratégia de carregamento num plugin so e, se preciso, faça preload da fonte principal para reduzir a troca visivel.

Como sei se o problema e do Perfmatters ou do Astra

Abra o painel de rede do navegador (F12, aba Network) e filtre por font. Se a requisicao para fonts.googleapis.com sumiu após ativar o Perfmatters, e o Perfmatters interceptando. Desligue uma opção de fonte do Perfmatters por vez e recarregue para isolar qual delas afeta a tipografia do Astra.

Preciso desativar todas as otimizacoes de fonte do Perfmatters por causa do Astra

Não. So precisa alinhar quem serve a fonte. Mantenha as otimizacoes que não conflitam e ajuste apenas Disable Google Fonts, Local Google Fonts e Remove Unused CSS para que respeitem a familia e as variantes definidas pelo Astra Pro.

Limpar o cache resolve o conflito de fontes entre os dois plugins

Limpar o cache e obrigatório após qualquer mudanca de fonte, porque o HTML em cache pode servir o link de fonte antigo, mas sozinho não resolve o conflito. Primeiro alinhe as opções de fonte do Perfmatters com a tipografia do Astra, depois limpe o cache do plugin e do CDN para confirmar.

Grave

Como corrigir LCP alto no WordPress (Core Web Vitals)

LCP alto no WordPress é quando o Largest Contentful Paint, o tempo até o maior elemento visível (geralmente a imagem ou o título do topo) ser renderizado, passa de 2,5 segundos. Costuma vir de servidor lento (TTFB), imagem hero pesada ou recursos que bloqueiam a renderização.

Grave

Como corrigir o cache do WP Rocket em páginas dinâmicas do WooCommerce

O cache do WP Rocket no WooCommerce mostra carrinho, total ou estoque desatualizados quando uma página dinâmica é servida como HTML estático. O WP Rocket exclui carrinho, checkout e minha conta automaticamente, mas páginas customizadas ou cookies próprios precisam de exclusão manual.

Grave

Como corrigir TBT alto e JavaScript bloqueante no WordPress

TBT alto no WordPress é quando o Total Blocking Time, a soma do tempo em que a thread principal fica bloqueada por JavaScript entre o primeiro render e a interatividade, passa de 200ms no laboratório. Costuma vir de scripts pesados, plugins que carregam JS no carregamento inicial e código de terceiros como rastreadores.

Atenção

Como otimizar o banco de dados WordPress para velocidade

Otimizar o banco de dados do WordPress é limpar e reorganizar as tabelas MySQL que acumulam dados desnecessários e ficam lentas com o tempo. O inchaço costuma vir de revisões de post, transients expirados, comentários de spam e tabelas órfãs deixadas por plugins removidos, que aumentam o tempo de cada query.

Atenção

Como corrigir o DNS Prefetch que não funciona no Perfmatters no WordPress

O Perfmatters DNS prefetch não funciona normalmente porque o domínio foi inserido em formato incorreto, o cache não foi limpo após salvar, ou a tag link rel=dns-prefetch é removida por outra camada de cache ou CDN antes de chegar ao navegador.

Atenção

Como corrigir o WP Rocket que não minifica o CSS

O WP Rocket minifica CSS de forma incompleta quando a opção Minify CSS files esta ligada mas certas folhas ficam de fora por regra do plugin: CSS inline, arquivos já terminados em .min, folhas com data-no-minify, CSS via @import e o CSS de posts do Elementor. A correção e ver qual folha o plugin ignora, limpar o cache e ajustar a origem.

Setores

Extensões

Integrações

Como corrigir o conflito de fontes entre Perfmatters e Astra Pro no WordPress

O que é conflito de fontes entre Perfmatters e Astra Pro?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir LCP alto no WordPress (Core Web Vitals)

Como corrigir o cache do WP Rocket em páginas dinâmicas do WooCommerce

Como corrigir TBT alto e JavaScript bloqueante no WordPress

Como otimizar o banco de dados WordPress para velocidade

Como corrigir o DNS Prefetch que não funciona no Perfmatters no WordPress

Como corrigir o WP Rocket que não minifica o CSS

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