# Como corrigir a lentidão do Astra Pro com muitas fontes personalizadas no WordPress

A queda de performance do Astra Pro com muitas fontes personalizadas ocorre quando o tema carrega várias famílias e pesos de Google Fonts de servidores externos, somando requisições que bloqueiam a renderização e atrasam o LCP da página.

## O que é lentidão de performance do Astra Pro com muitas fontes?

A lentidão de performance do Astra Pro com muitas fontes personalizadas é a queda de velocidade que aparece quando o site usa várias famílias tipográficas, cada uma com vários pesos e estilos, configuradas na tipografia do tema ou pelo plugin Custom Fonts. Cada família e cada peso vira um arquivo de fonte a baixar, e quando essas fontes vêm dos servidores do Google o navegador abre uma conexão externa e espera o download antes de pintar o texto, o que aumenta as requisições da página e o tempo de carregamento.

O impacto recai principalmente no LCP e no CLS, duas métricas de Core Web Vitals. Fontes externas e não pré-carregadas atrasam a exibição do texto principal, piorando o LCP, e a troca da fonte de fallback pela fonte final empurra o layout, gerando CLS. O Astra oferece desde a versão 3.6.0 a opção de hospedar as Google Fonts localmente e pré-carregá-las, justamente para reduzir essas requisições externas e acelerar a exibição do texto.

## Como identificar

- O PageSpeed Insights aponta o aviso 'Ensure text remains visible during webfont load' (font-display) e marca as fontes como recurso que atrasa o First Contentful Paint.
- O relatório de performance lista várias requisições para 'fonts.googleapis.com' e 'fonts.gstatic.com', uma para cada família e peso configurados no tema.
- O texto aparece com a fonte de fallback do sistema por um instante e depois 'pula' para a fonte definitiva, gerando layout shift (CLS) visível ao carregar a página.
- O LCP da página sobe acima de 2,5 segundos no campo e nos testes de laboratório quando o bloco de texto principal usa uma das fontes personalizadas.
- A aba Network do navegador mostra a aba de fontes (Font) demorando para concluir, com vários arquivos .woff2 ainda em download enquanto o restante da página já renderizou.

**Antes de começar:** Antes de alterar a tipografia ou ativar a hospedagem local de fontes em produção, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso alguma fonte deixe de carregar como esperado.

## Como prevenir

- Padronize o projeto em no máximo duas famílias de fonte e poucos pesos desde o início, evitando acumular variações que ninguém usa no layout.
- Mantenha 'Load Google Fonts Locally' e 'Preload Local Fonts' sempre ativados no Astra para servir as fontes do próprio servidor e pré-carregá-las.
- Sempre que adicionar uma fonte personalizada pelo plugin Custom Fonts, priorize o arquivo .woff2 e remova formatos pesados que não são mais necessários.
- Reavalie o PageSpeed Insights após cada mudança de tipografia para acompanhar o número de requisições de fonte, o LCP e o CLS antes de publicar.

Erros relacionados

- [Como corrigir o conflito de fontes entre Perfmatters e Astra Pro](https://full.services/wp-fixer/corrigir-conflito-fontes-perfmatters-astra/)
- [Como corrigir o conflito de CSS otimizado entre Astra Pro e WP Rocket](https://full.services/wp-fixer/corrigir-conflito-css-astra-pro-wp-rocket/)
- [Como corrigir o erro de carregamento de fontes no WordPress](https://full.services/wp-fixer/corrigir-font-loading-wordpress/)

## Causa

- O tema está configurado com várias famílias de fontes diferentes na tipografia do Astra (corpo, títulos, botões e widgets), e cada família adicional gera mais arquivos de fonte para o navegador baixar antes de exibir o texto.
- Cada família está carregando muitos pesos e estilos (por exemplo 300, 400, 500, 600, 700 mais itálicos), e cada variação é um arquivo .woff2 separado a baixar, multiplicando as requisições mesmo com poucas famílias.
- A opção 'Load Google Fonts Locally' está desativada em Astra > Dashboard > Settings > Performance, então as fontes são buscadas em fonts.gstatic.com a cada visita, abrindo conexões externas que bloqueiam a renderização do texto.
- As fontes locais não estão pré-carregadas: com 'Preload Local Fonts' desligado, o navegador só descobre o arquivo da fonte ao processar o CSS, atrasando a exibição do texto e piorando o LCP.
- Fontes adicionadas pelo plugin Custom Fonts foram enviadas apenas no formato .ttf ou .otf, sem a versão .woff2 mais leve, o que aumenta o tamanho de cada download e o tempo de carregamento.

## Como resolver

1. Hospede as Google Fonts localmente no Astra: Ative a hospedagem local para que o Astra faça uma única chamada à API do Google, baixe os arquivos em .woff2 e os sirva do seu próprio servidor, eliminando as conexões externas a cada visita e melhorando o CLS.

```
Painel WP -> Astra -> Dashboard -> Settings -> Performance
Ative a opção 'Load Google Fonts Locally'
```

2. Pré-carregue as fontes locais: Com as fontes já salvas localmente, ative o preload para o navegador buscar o arquivo da fonte cedo no carregamento, deixando o texto pronto para pintar mais rápido e reduzindo o LCP.

```
Painel WP -> Astra -> Dashboard -> Settings -> Performance
Ative a opção 'Preload Local Fonts'
```

3. Reduza o número de famílias e pesos de fonte: Na tipografia do Astra, padronize o site em uma ou duas famílias e mantenha apenas os pesos realmente usados (por exemplo 400 e 700). Cada família e cada peso a menos é um arquivo de fonte a menos para baixar.

```
Personalizar -> Global -> Typography (Tipografia)
Defina a mesma família para corpo e títulos quando possível
Remova pesos e estilos não usados de cada família
```

4. Envie as Custom Fonts em formato .woff2: Para fontes que não são do Google, use o plugin Custom Fonts e priorize o arquivo .woff2, que é mais leve que .ttf ou .otf. Assim cada fonte personalizada baixa mais rápido sem perder qualidade.

```
Painel WP -> Aparência -> Custom Fonts -> Adicionar nova fonte
Faça upload do arquivo .woff2 da família desejada
```

5. Atualize as fontes locais e revalide a performance: Depois de ajustar as fontes, limpe o cache local do Astra para regerar os arquivos e rode o teste de novo para confirmar a queda nas requisições e no LCP.

```
Painel WP -> Astra -> Dashboard -> Settings -> Performance
Clique em 'Flush Local Fonts Cache'
Rode o PageSpeed Insights e confira o número de requisições de fonte e o LCP
```


## Código

```php
<?php
// Pré-carrega a fonte local mais usada (.woff2) para acelerar o LCP no Astra.
// Ajuste o caminho conforme a fonte servida pelo seu site.
add_action( 'wp_head', 'full_preload_fonte_principal', 1 );
function full_preload_fonte_principal() {
    $fonte = get_stylesheet_directory_uri() . '/assets/fonts/inter-v13-latin-regular.woff2';
    printf(
        '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "n",
        esc_url( $fonte )
    );
}
```

## Perguntas frequentes

### Por que muitas fontes personalizadas deixam o Astra Pro lento

Cada família e cada peso de fonte vira um arquivo separado que o navegador precisa baixar antes de exibir o texto. Quando essas fontes vêm dos servidores do Google, o navegador ainda abre conexões externas, somando requisições que atrasam o carregamento e pioram o LCP da página.

### Onde fica a opção de hospedar Google Fonts localmente no Astra

A opção está em Astra > Dashboard > Settings > Performance, no botão 'Load Google Fonts Locally'. Disponível desde a versão 3.6.0 do Astra, ela faz uma única chamada à API do Google e salva os arquivos em .woff2 no seu servidor.

### Hospedar as fontes localmente melhora o Core Web Vitals

Sim. Servir as fontes do próprio servidor elimina as conexões externas a cada visita e, junto com o preload, ajuda o texto a aparecer mais cedo. Isso reduz o LCP e o layout shift causado pela troca de fonte, melhorando as métricas de Core Web Vitals.

### Para que serve o Preload Local Fonts no Astra

O 'Preload Local Fonts' avisa o navegador para buscar o arquivo da fonte cedo no carregamento, antes de processar todo o CSS. Assim a fonte fica pronta quando o texto começa a ser pintado, reduzindo o atraso de exibição e o impacto no LCP.

### Quantas fontes devo usar para não prejudicar a velocidade

Como regra prática, mantenha uma ou duas famílias e só os pesos realmente usados, como 400 e 700. Cada família e cada peso a menos é um arquivo de fonte a menos para baixar, o que reduz requisições e acelera a renderização do texto.

### Qual formato de fonte é melhor para performance no WordPress

O formato .woff2 é o mais indicado por ser bem mais leve que .ttf ou .otf, mantendo a qualidade. Ao usar o plugin Custom Fonts, priorize enviar a versão .woff2 de cada família para que cada fonte baixe mais rápido.

### Preciso limpar o cache depois de mudar as fontes do Astra

Sim. Após ativar a hospedagem local ou trocar famílias, use o botão 'Flush Local Fonts Cache' em Astra > Dashboard > Settings > Performance para regerar os arquivos locais e garantir que as fontes corretas sejam servidas.

**Fonte:** [Astra — How to Self-Host Google Fonts in Astra?](https://wpastra.com/docs/self-hosted-google-fonts/)