Otimizar fontes no WordPress significa hospedar os arquivos localmente, aplicar font-display e carregar so o necessário. Segundo a web.dev (2024), navegadores bloqueiam o texto por até 3 s enquanto a fonte carrega. Cada peso extra pesa de 15 KB a 50 KB no WOFF2. Comece medindo no PageSpeed Insights.

As fontes são um dos recursos que mais atrasam a primeira pintura de texto no WordPress, e quase ninguém olha para elas. Quando o tema chama o Google Fonts por um CSS remoto, o navegador precisa baixar a folha de estilo, descobrir o arquivo da fonte e só então pintar o texto. Esse encadeamento gera o FOIT, aquele intervalo em que a página fica sem texto visível. Otimizar as fontes corta essa cadeia: você hospeda os arquivos no próprio servidor, controla o comportamento de exibição e elimina pesos que ninguém usa. O resultado aparece direto no LCP e no Core Web Vitals do seu site WordPress, dentro dos conteúdos de performance WordPress da FULL.

Diagnóstico rápido: O que as fontes custam no carregamento

Um tema WordPress médio carrega entre 4 e 8 pesos de fontes, o que soma de 120 KB a 400 KB transferidos antes do primeiro texto aparecer. Esse peso é silencioso porque não aparece como imagem nem como script no relatório padrão. A tabela abaixo resume o custo real de cada fonte de problema e a correção direta, para você priorizar onde mexer primeiro.

Nos tickets de suporte da FULL, sites com queixa de lentidão de carregamento quase sempre têm o Google Fonts remoto ativo no tema. É o ponto que mais aparece quando a gente abre o waterfall junto com o cliente.

Passo a passo: Como otimizar as fontes no WordPress

Otimizar fontes no WordPress segue cinco etapas, da medição até o controle de pesos, e leva cerca de 30 minutos num site comum. A ordem importa: medir antes de mexer evita que você troque o comportamento errado e infle o CLS. Os passos abaixo valem para qualquer tema, com ou sem Elementor PRO, e usam ferramentas gratuitas ou já inclusas no bundle FULL.

Passo 1: Meça o impacto das fontes no PageSpeed insights

Rode a URL no PageSpeed Insights e abra a seção de oportunidades. Procure por “Garanta que o texto permaneça visível” e por requisições a fonts.googleapis.com no waterfall. Esses dois sinais confirmam que as fontes remotas estão atrasando a renderização do texto principal da viewport.

Passo 2: Hospede as fontes localmente

Instale o OMGF ou o Perfmatters para baixar os arquivos do Google Fonts e servi-los do seu domínio. Isso elimina a requisição ao servidor externo e a etapa de DNS lookup. A fonte passa a ser descoberta na mesma origem do site, o que reduz o tempo até o primeiro texto pintar.

Passo 3: Aplique font-display: Swap

Adicione font-display: swap às regras @font-face do seu CSS. Com isso, o navegador exibe imediatamente uma fonte de fallback e troca pela definitiva quando ela carrega. O texto nunca fica invisível, e o LCP deixa de depender do download da fonte.

Passo 4: Carregue só os pesos usados

Verifique no código quais pesos o tema realmente aplica, geralmente regular (400) e bold (700). Remova os demais do carregamento. Cada peso descartado economiza de 15 KB a 50 KB no WOFF2 e uma requisição a menos no caminho crítico.

Passo 5: Sirva WOFF2 e faça preload da fonte principal

Converta os arquivos para WOFF2, o formato mais compacto, e adicione para a fonte do título acima da dobra. O preload antecipa o download do recurso de texto mais importante, alinhado à recomendação de pré-carregar ativos críticos.

Por que hospedar as fontes localmente acelera o site

Hospedar as fontes localmente corta uma cadeia de requisições que custa centenas de milissegundos em conexões móveis. Google Fonts carregado via CSS remoto sem preconnect em conexão 4G força o navegador a resolver o DNS de dois domínios, baixar a folha de estilo e só então descobrir o arquivo da fonte. Esse encadeamento atrasa a descoberta do recurso e provoca FOIT de até 3 s.

Quando você serve a fonte do próprio domínio, o navegador a encontra na mesma origem do HTML, sem salto extra de rede. Em testes de campo, sites que migraram do Google Fonts remoto para o self-host com OMGF tendem a reduzir o tempo de bloqueio de renderização de forma consistente. A redução do TTFB no WordPress aumenta esse ganho, porque a fonte local chega junto da primeira resposta do servidor. Hospedar local também simplifica o cache: o arquivo WOFF2 entra no mesmo CDN das demais estáticas, em vez de depender da infraestrutura do Google.

Como font-display controla o que o usuário vê primeiro

A propriedade font-display define o que o navegador mostra enquanto a fonte carrega, e isso decide se você terá FOIT ou layout shift. Sem font-display, o padrão bloqueia o texto por até 3 s em navegadores Chromium e Firefox, e indefinidamente no Safari. Com swap, o texto aparece na hora num fallback e troca depois pela fonte definitiva.

O valor optional é o mais conservador: ele limita o atraso de troca a 100 ms e evita o layout shift quando a fonte e o fallback ocupam espaços diferentes. A escolha depende do objetivo. Se a identidade visual da marca é inegociável, swap garante que a fonte certa apareça. Se a estabilidade do CLS e do LCP vale mais, optional protege o Core Web Vitals. Fonte hospedada local com font-display: swap sem fallback métrico ainda pode gerar deslocamento; ajustar size-adjust no @font-face equaliza a métrica das duas fontes e estabiliza o layout.

Onde o Elementor PRO duplica o carregamento de fontes

O Elementor PRO carrega fontes por conta própria, e isso costuma somar pesos que o tema já trazia. Em sites com Elementor PRO usando 8 pesos de fonte sem subsetting, o navegador chega a baixar até 400 KB de arquivos antes do primeiro texto pintar. O problema piora quando o Google Fonts está ativo no painel do tema e no plugin ao mesmo tempo.

Nesse cenário, as fontes são requisitadas duas vezes, em dois caminhos diferentes. A correção é desativar o carregamento nativo de fontes do Elementor em Configurações > Recursos e servir um único WOFF2 local para cada peso real. A gente vê esse padrão direto no suporte da FULL: o site usa duas famílias visíveis, mas carrega seis. Limpar isso e padronizar o CSS minificado das fontes costuma derrubar dezenas de kilobytes do caminho crítico, sem que o visitante perceba qualquer mudança visual na tipografia.

Acelere o WordPress inteiro com o bundle da FULL

Otimizar as fontes resolve uma camada do problema, mas performance real exige cache, CSS crítico e CDN trabalhando juntos no mesmo site. O plano PRO da FULL custa R$849 por ano e inclui Perfmatters, WP Rocket e os outros plugins premium de otimização, com gestão e ativação em um clique pelo painel. Distribuído entre os 10 sites do plano, o custo fica em R$85 por site, contra a compra avulsa de cada licença separada, que sai bem mais cara no fim do ano. É a mesma stack que a gente usa para acelerar os testes de desempenho dos sites WordPress da base FULL todos os dias. Conheça o plano PRO em FULL.services/planos e centralize cache, fontes locais e CDN no mesmo painel de controle, funcionando em qualquer hospedagem que você já use hoje.

Legenda: o waterfall mostra a fonte servida localmente chegando antes do primeiro texto, sem requisição externa.

Quando otimizar fontes não muda o resultado

Otimizar fontes tem ganho quase nulo quando o gargalo do site está em outro lugar. Em sites onde o TTFB já passa de 800 ms por hospedagem fraca, mexer nas fontes economiza milissegundos enquanto o servidor desperdiça quase um segundo na resposta inicial. A prioridade ali é a infraestrutura, não a tipografia.

Use esta árvore para decidir onde investir o tempo de otimização das fontes:

• Se o texto é o maior elemento da viewport → otimizar as fontes ataca o LCP direto, com preload e self-host.
• Se o TTFB passa de 800 ms → resolva hospedagem e cache antes de tocar nas fontes.
• Se o LCP é uma imagem de banner → priorize a imagem; as fontes entram depois.
• Se o site usa só uma família com dois pesos → o ganho é marginal, foque em JavaScript e cache.

Para o caso da imagem dominar a dobra, o trabalho passa por eliminar o JavaScript que bloqueia a renderização e tratar o recurso pesado primeiro.

Perguntas frequentes sobre otimização de fontes no WordPress

Próximos passos para um WordPress mais leve

Otimizar as fontes é o ajuste de performance com melhor relação esforço-resultado quando o texto domina a primeira dobra. Comece medindo no PageSpeed Insights, hospede os arquivos localmente, aplique font-display e descarte os pesos que ninguém usa. Depois disso, avance para cache de página e remoção do CSS crítico bloqueante, que fecham o caminho de renderização. Para seguir aprendendo, o FULL Academy reúne os tutoriais de performance da FULL em um só lugar, e o guia para acelerar o WordPress organiza a sequência completa. Performance é soma de camadas, e as fontes são a primeira que o visitante enxerga.