Quando executa um site no PageSpeed Insights, um dos diagnósticos comuns é «Ensure text remains visible during webfont load». O problema é familiar a qualquer pessoa que tenha instalado o Elementor, o Astra ou ligado o Google Fonts: enquanto o browser descarrega o ficheiro da fonte, o texto na página está simplesmente ausente. Um ecrã branco em vez de um título, frações de segundo de vazio e o visitante já saiu.

Tecnicamente, isto chama-se FOIT (Flash of Invisible Text). A raiz do problema está na diretiva font-display que o browser utiliza por defeito. Sem especificar explicitamente font-display: swap, o browser espera que a fonte carregue e não mostra texto até o ficheiro ser recebido. E se a fonte carregar a partir de uma CDN através de um domínio de terceiros, o atraso acumula-se e o PageSpeed Insights assinala um aviso.

Isto resolve-se com duas coisas: primeiro, cada @font-face precisa de ter font-display: swap adicionado, para que o browser mostre imediatamente o texto numa fonte de sistema e a «troque» pela personalizada quando esta carregar. Segundo, as fontes criticamente importantes (a usada para o título no primeiro ecrã) devem ser pré-carregadas via <link rel="preload">. Abaixo está uma explicação passo a passo de como fazer isto no WordPress, tendo em conta plugins como o Elementor e temas como o Astra.

💡 Resumo rápido:

• Abra o relatório do PageSpeed Insights e anote as fontes problemáticas a partir dos diagnósticos
• Desative os estilos do plugin e do tema via wp_dequeue_style no functions.php
• Copie os ficheiros das fontes para uma pasta local e recrie o font-face com font-display: swap
• Adicione preload para uma ou duas fontes do primeiro ecrã
• Para fontes personalizadas do Elementor, altere o caminho para local e reconstrua o CSS

Passo 1: encontre as fontes problemáticas no relatório

Execute uma auditoria no PageSpeed Insights, aguarde o resultado e encontre a secção de diagnósticos. Procuramos o item «Ensure text remains visible during webfont load».

Expanda a lista para ver os URLs específicos das fontes que não têm font-display: swap. Normalmente são:

• fontawesome-webfont.woff2, Font Awesome do Elementor;
• eicons.woff2, fonte de ícones do Elementor;
• Google Fonts (Open Sans, Roboto, Montserrat), se o tema as puxar via CDN.

Anote os nomes dos ficheiros; eles serão necessários para os passos seguintes. O principal agora é perceber qual o plugin ou tema responsável por cada fonte. O Font Awesome e os eicons vêm do Elementor. As Google Fonts são, na maioria das vezes, ligadas pelo tema; no Astra, é o hook astra-google-fonts.

Passo 2: desative os estilos que carregam as fontes

Agora a tarefa é remover a ligação padrão destas fontes para que as possamos trazer de volta com as definições corretas. Vá ao functions.php do tema filho (ou a um plugin de código como o Code Snippets) e adicione:

1
/**
2
 * Disable styles that load problematic fonts
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

A prioridade 9999 é importante: o hook deve executar DEPOIS de os plugins e o tema terem registado os seus estilos. Se a fonte ainda estiver a carregar, verifique se outro plugin a está a chamar (por exemplo, um menu ou formulário de contacto pode ligar a sua própria versão do Font Awesome). Procure nos ficheiros do plugin a string wp_enqueue_style com o handle correspondente.

Após adicionar o código, o ícone do Font Awesome no site desaparecerá temporariamente; isto é normal. Vamos recuperá-lo no passo 4.

Passo 3: copie os ficheiros das fontes para uma pasta local

Quando uma fonte é ligada via CDN ou através de um plugin, o browser faz um pedido DNS extra a um domínio de terceiros. O alojamento local de fontes elimina este atraso. O algoritmo:

• Encontre os ficheiros das fontes na estrutura do plugin. Para o Font Awesome do Elementor, o caminho será: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Para os eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Para as Google Fonts, descarregue os .woff2 da CDN do Google Fonts.

• Crie uma pasta /wp-content/fonts/ na raiz do site e copie todos os ficheiros necessários para lá. O formato .woff2 (browsers modernos) e .woff (alternativa para os mais antigos) são suficientes.

• Se a fonte foi ligada pelo tema via CDN do Google Fonts, descarregue o .woff2 atual manualmente através de um link direto ou usando o plugin OMGF (mais sobre isto abaixo).

Agora cada fonte tem um caminho local como /wp-content/fonts/fontawesome-webfont.woff2. Passemos à parte mais importante: ligá-las.

Passo 4: ligue as fontes com font-display: swap e preload

Os estilos estão desativados, os ficheiros estão no lugar. Agora definimos o @font-face com a diretiva correta font-display: swap e adicionamos preload para carregamento instantâneo. Coloque o código no functions.php através do hook wp_head:

1
/**
2
 * Load fonts locally with font-display: swap and preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Preload critical fonts -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — icon font */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — Elementor icons */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

A prioridade 5 no wp_head significa que as tags de preload aparecerão no <head> entre as primeiras, para que o browser comece a descarregar a fonte antes de chegar ao CSS. O atributo crossorigin="anonymous" é obrigatório para o pré-carregamento de fontes: sem ele, o browser ignorará o preload e descarregará o ficheiro novamente.

Uma nuance importante: o URL dentro do @font-face não deve ter parâmetros de consulta como ?#iefix ou ?v=4.7.0. O PageSpeed Insights tropeça neles durante a análise. O link deve ser limpo: /wp-content/fonts/fontawesome-webfont.woff2, e mais nada.

Após adicionar o código, limpe a cache (plugin de caching + Cloudflare, se usar) e execute novamente o PageSpeed Insights. O aviso da fonte deve desaparecer. Os ícones do Font Awesome voltam aos seus lugares, mas agora não bloqueiam a exibição do texto.

Passo 5: fontes personalizadas do Elementor, um caso especial

Se usa o Elementor Pro com a funcionalidade «Custom Fonts», a lógica é a mesma, mas há dois passos adicionais.

Primeiro, altere o caminho da fonte nas definições do Elementor. Vá a Elementor → Custom Fonts, abra a fonte desejada e, no campo URL, especifique o caminho local /wp-content/fonts/your-font.woff2 em vez de um link externo de CDN ou do Google Fonts:

Segundo, reconstrua o CSS do Elementor. Após alterar o caminho, vá a Elementor → Tools → Regenerate CSS e clique no botão de regeneração. Isto forçará o Elementor a reconstruir os ficheiros de estilo com os novos caminhos das fontes:

Após a regeneração, verifique se o caminho da fonte no HTML da página aponta para o ficheiro local, e não para a CDN. Depois, no header.php (ou via wp_head como no passo 4) adicione o preload para esta fonte:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

E o @font-face correspondente com font-display: swap:

1
@font-face {
2
    font-family: 'FuturaBookC';
3
    font-display: swap;
4
    font-style: normal;
5
    font-weight: normal;
6
    src: url('/wp-content/fonts/FuturaBookC.woff2') format('woff2'),
7
         url('/wp-content/fonts/FuturaBookC.woff') format('woff');
8
}

Caminho alternativo: plugins para otimização automática

O método manual dá controlo total, mas requer atenção ao atualizar plugins (uma atualização do Elementor pode restaurar a ligação padrão da fonte). Se quiser automatizar o processo, aqui estão dois plugins que resolvem a tarefa sem editar código.

OMGF (Optimize My Google Fonts). Um plugin gratuito que analisa todas as Google Fonts no site, descarrega-as localmente e adiciona font-display: swap automaticamente. Instale-o, clique em «Optimize» e todas as Google Fonts do seu tema tornam-se locais com cabeçalhos corretos. A versão Pro pode trabalhar com Adobe Fonts e quaisquer fontes de CDN de terceiros.

Swap Google Fonts Display. Um plugin minimalista que faz exatamente uma coisa: adiciona font-display: swap a todas as Google Fonts em tempo real. Não descarrega localmente, mas elimina o aviso do PageSpeed Insights em 10 segundos de instalação. Adequado como solução temporária ou se o alojamento local de fontes não for crítico.

Os plugins poupam tempo, mas lembre-se: eles só funcionam com Google Fonts. As fontes de ícones (Font Awesome, eicons) e as fontes personalizadas do Elementor não são tocadas; continuará a precisar de passar pelos passos manuais 1 a 5.

⁉️🤔 Perguntas frequentes

Preciso de pré-carregar TODAS as fontes do site?

Não. O <link rel="preload"> faz sentido apenas para uma ou duas fontes que aparecem no primeiro ecrã, por exemplo, a fonte do título H1 e a fonte do texto principal. Pré-carregar uma dúzia de fontes terá o efeito oposto: o browser gastará largura de banda em ficheiros que não são necessários agora e atrasará o carregamento do conteúdo crítico. Pré-carregue apenas as fontes usadas no primeiro viewport. Para um blog típico, isto é uma fonte de título e uma fonte de texto, totalizando dois ficheiros woff2. Pré-carregar uma fonte de ícones só vale a pena se um ícone aparecer no primeiro ecrã (menu, pesquisa). Todo o resto carregará à medida que faz scroll, sem prejudicar as métricas do PageSpeed.

E se o site «partir» após desativar os estilos?

O cenário mais comum: desativou o elementor-icons e as setas do slider ou o ícone de pesquisa desapareceram. A solução é verificar quais os elementos específicos que usam a fonte antes de desativar. Abra as DevTools (F12), separador Elements, encontre o ícone e veja a classe CSS. Se a classe começar com fa-, é Font Awesome. Se começar com eicon-, são eicons. Desative apenas o que é realmente usado e ligue localmente os mesmos ficheiros; visualmente nada mudará. O site «parte» em dois casos: ou desativou um estilo que, além da fonte, continha regras CSS (raro, mas acontece com temas como o Astra), ou não voltou a ligar a fonte localmente. No primeiro caso, extraia as regras CSS do ficheiro desativado e copie-as para o seu bloco wp_head. No segundo caso, simplesmente adicione o @font-face em falta.

Este método funciona para qualquer tema WordPress?

Sim, com ressalvas. O princípio dequeue style → local fonts → font-display: swap → preload é universal. Apenas os handles dos estilos mudam: para o Astra é astra-google-fonts, para o GeneratePress é generate-fonts, para o OceanWP é oceanwp-google-fonts. Para encontrar o handle do seu tema, abra o código fonte da página (Ctrl+U), encontre <link rel="stylesheet" com a fonte e veja o id da tag; este é o handle. Depois substitua-o no wp_dequeue_style. Os temas modernos (2024-2026) adicionam cada vez mais font-display: swap de raiz: o Twenty Twenty-Five e os temas de blocos baseados em theme.json já têm esta definição. Antes de editar o código, verifique se o seu tema já faz tudo corretamente e o aviso é causado apenas por uma fonte de ícones de um plugin separado.

É obrigatório copiar as fontes localmente?

Tecnicamente, não. O font-display: swap funciona também com fontes ligadas via CDN (Google Fonts, cdnjs). Mas o alojamento local oferece duas vantagens: primeiro, remove um pedido DNS extra a um domínio de terceiros (poupando 50-200 ms) e, segundo, não depende da disponibilidade da CDN. Se o Google Fonts ficar em baixo, o seu site permanecerá com texto legível. Para um site de produção, o alojamento local é a melhor prática; para um projeto pessoal, é opcional. Exceção: fontes de ícones. O Font Awesome, eicons e dashicons carregam do plugin (localmente por definição); copiá-los para a pasta raiz é necessário apenas para «intercetar» o controlo de carregamento após o dequeue. O ficheiro em si já está fisicamente no servidor.

O que fazer em relação ao aviso da fonte: o algoritmo final

Percorra os cinco passos deste guia e o aviso «Ensure text remains visible during webfont load» desaparecerá do relatório do PageSpeed Insights. Em resumo: desative a ligação padrão → coloque as fontes localmente → traga-as de volta com font-display: swap → pré-carregue os woff2 críticos → para o Elementor, altere adicionalmente o caminho e reconstrua o CSS. Como resultado, o texto no site fica visível instantaneamente, as métricas LCP e FCP melhoram e o visitante não vê uma página «a saltar».

Se não quiser mexer em código, comece com o plugin OMGF para as Google Fonts. Para fontes de ícones, não há um plugin «poção mágica»; terá sempre de as processar manualmente, mas são 20 minutos de trabalho que compensam com pontuações mais altas no PageSpeed e melhorias reais na velocidade de carregamento. Experimente e teste após cada alteração; só uma auditoria repetida mostrará que o problema foi realmente resolvido.