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

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

1. 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
```

2. 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
```

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)
```

4. 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)
```

5. 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
```


## Código

```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.

**Fonte:** [Perfmatters — Documentation (Fonts)](https://perfmatters.io/docs/)