Performance

Fontes web e velocidade: porque o Google Fonts pode estar a travar o site

A maioria dos sites de PME em Portugal carrega fontes do Google sem pensar duas vezes — copiar a tag, colar no <head>, e seguir. O custo invisível são 100-300ms a mais em cada visita, layout shift visível, e — desde a decisão alemã de 2022 — um problema RGPD por servir IPs a um terceiro fora da UE.

Este guia mostra o que está mal com Google Fonts via CDN, e como servir tipografia rápida e conforme sem perder a fonte que escolheste.

O que acontece quando carregas fontes do Google CDN

Cada vez que um visitante abre o teu site:

  1. O navegador descarrega o HTML.
  2. Vê <link href="https://fonts.googleapis.com/...">.
  3. Faz DNS lookup + TCP + TLS para fonts.googleapis.com.
  4. Descarrega o CSS com as @font-face.
  5. Faz DNS lookup + TCP + TLS para fonts.gstatic.com.
  6. Descarrega os ficheiros .woff2.
  7. Aplica.

São 4-7 round-trips a um domínio externo antes de o texto aparecer com a fonte certa. Em mobile 4G, isto custa 200-500ms — e durante esse tempo o utilizador vê fonte do sistema (FOUT) ou texto invisível (FOIT).

A consequência no LCP é direta. A consequência no CLS também — quando a fonte chega, o layout muda.

O problema RGPD do Google Fonts

Em janeiro de 2022, um tribunal regional alemão (Munique) decidiu que carregar Google Fonts via CDN transmite o IP do utilizador ao Google sem base legal — e condenou o operador do site a 100€ de indemnização. A decisão foi local mas marcou tendência: várias autoridades europeias (incluindo a DPC irlandesa) recomendaram auto-hospedagem.

A CNPD não emitiu posição formal específica em Portugal, mas o raciocínio aplica-se: transferir IP a um responsável fora da UE (Google LLC) sem base legal nem TIA documentada é exposição.

Solução simples e definitiva: auto-hospedar as fontes no teu domínio. O Google deixa de saber quem está a visitar o teu site, e ganhas velocidade ao mesmo tempo.

Auto-hospedar fontes em 4 passos

Funciona para WordPress, Next.js, qualquer site:

  1. Vai a Google Webfonts Helper ou Fontsource.
  2. Escolhe a fonte e os pesos que realmente usas (não descarregues 9 pesos se usas 2).
  3. Descarrega os .woff2 modernos.
  4. Coloca-os no servidor (ex.: /fonts/) e adiciona @font-face no CSS.

Exemplo concreto para a fonte Inter:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
}

Sem <link> para o Google. Sem CSS extra a descarregar. Sem terceiros.

font-display: o atributo que muda tudo

Por defeito, se a fonte demora a chegar, o navegador esconde o texto até 3 segundos — o famoso "flash de texto invisível". O atributo font-display controla isso:

  • swap — mostra texto com fonte de sistema imediatamente, troca quando a custom chega. Para a maioria, este é o certo.
  • optional — se a fonte não chega em 100ms, mantém a do sistema. Excelente para INP/LCP, pior para identidade visual.
  • fallback — meio-termo. Mostra invisível 100ms, depois sistema, troca se chegar em 3s.
  • block — esconde 3s. Pior para UX. Quase nunca usar.
  • auto — escolha do navegador. Imprevisível.

Para PME portuguesa típica, swap ou optional é a resposta certa. Nunca block.

Subsetting: usar só o que precisas

Uma fonte como Inter tem caracteres para 100+ idiomas, mais glifos especiais, mais variantes — pode pesar 200 KB por peso. Para um site em português, só precisas dos caracteres latinos com acentos. Subsetting corta o resto.

O Google Webfonts Helper deixa-te escolher subsets — para PT, marca latin e latin-ext. Resultado: peso cai de 200 KB para ~50 KB por ficheiro. Multiplica por 4 pesos e poupas 600 KB.

Para sites Next.js modernos (16+), a função next/font faz subsetting automático com base no subsets: ['latin']. WordPress não tem nativo — usa um plugin como OMGF ou faz manual.

Variable fonts: uma só carregamento, todos os pesos

Fontes variáveis (variable fonts) são uma evolução de 2017 que só recentemente está em mainstream. Em vez de descarregares 4 ficheiros (regular, medium, semibold, bold), descarregas um ficheiro que contém todos os pesos.

Para a fonte Inter: o variable file pesa ~95 KB e cobre pesos de 100 a 900. 4 ficheiros separados pesariam 200+ KB no total.

Não todas as fontes têm versão variable, mas muitas das mais usadas têm: Inter, Roboto Flex, Manrope, Outfit, Crimson Pro. Verifica no Google Fonts (filtro "Show only variable fonts").

Preload — quando vale e quando estraga

<link rel="preload"> diz ao navegador "descarrega isto cedo, é crítico":

<link rel="preload" href="/fonts/inter-variable.woff2"
      as="font" type="font/woff2" crossorigin>

Bom para: a fonte do hero/H1 — o texto acima da dobra que define o LCP. Mau para: precarregar 5 ficheiros de fonte. Compete com imagens e CSS críticos. Empata o navegador.

Regra: 1 preload de fonte por página (a do título principal). Os outros pesos carregam quando forem necessários.

Quantas fontes devias usar

Resposta curta: uma família. Resposta longa: no máximo duas (uma para títulos, outra para corpo), com 2-3 pesos por família.

Cada fonte adicional é 50-100 KB. Sites que usam 4 famílias diferentes com 3 pesos cada estão a descarregar quase 1 MB só em tipografia. Para uma PME portuguesa, isto é absurdo.

A escolha da tipografia e cores do site tem implicações de performance — não é só design.

Ferramentas para diagnosticar

Para perceber quanto custa a tipografia atual do teu site:

  • Chrome DevTools → Network → Filter "Font" — mostra peso e tempo total de cada fonte.
  • PageSpeed Insights — flag específica para "Ensure text remains visible during webfont load".
  • Fontspector ou inspetor de fontes — mostra quais carregaste e usaste mesmo.

Se vês 4+ requests para fonts.gstatic.com ou fonts.googleapis.com, sabes que estás a pagar o preço.

Plugins WordPress para auto-hospedar (sem dor)

Para sites WordPress que já usam Google Fonts via tema ou plugin:

  • OMGF (Host Webfonts Locally) — descarrega e serve localmente. Plano grátis cobre PME típica. Plano Pro ~25€/ano.
  • Local Google Fonts — alternativa simples e grátis.
  • Muitos temas modernos (Kadence, GeneratePress) têm opção nativa.

Instalas, ativas, e o plugin substitui o <link> externo por ficheiros servidos do teu domínio. Trabalho de 10 minutos.

Adobe Fonts (Typekit) e outras alternativas pagas

Adobe Fonts (antigo Typekit) tem catálogo premium, mas o modelo de servir é via CDN deles — mesmo problema RGPD + performance que o Google Fonts. Para 95% das PMEs, não é a escolha certa. Para projetos que precisam de uma fonte específica que só lá existe, o caminho é: licenciar para auto-hospedagem (Adobe permite em alguns planos) ou comprar a fonte direta ao foundry.

Foundries independentes (Fontshare, Tipotype, Indestructible Type) vendem fontes premium com licença de auto-hospedagem incluída — pagas uma vez, serves do teu domínio para sempre. Custo por família: 30€ a 200€.

Para projetos com identidade visual forte, vale o investimento. Para PME com necessidade de "uma fonte decente", o Google Fonts auto-hospedado chega.

Como atualizar a fonte sem partir o cache

Erro comum: substituir o ficheiro .woff2 no servidor com o mesmo nome. Resultado: utilizadores com cache do navegador continuam a ver a versão antiga durante semanas.

Soluções:

  • Versioning no nome: inter-v2.woff2. Cada nova versão muda o nome.
  • Query string: inter.woff2?v=2. Funciona mas alguns CDN ignoram query strings.
  • Cache busting via build (Next.js, Vite, Webpack) — hash automático no nome.

Para WordPress puro, versioning manual é o caminho. Faz com que cada atualização force novo download.

Fallback metrics — eliminar layout shift por troca de fonte

Quando a fonte do sistema aparece primeiro (com font-display: swap) e depois é substituída pela custom, há frequentemente um pequeno layout shift — letras com larguras diferentes empurram texto. Em CLS isto soma.

A solução moderna: declarar fallback metrics que aproximam a fonte do sistema da custom:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: 'Inter', 'Inter Fallback', sans-serif; }

O navegador renderiza a fallback ajustada às métricas da Inter — quando a Inter chega, há praticamente zero shift. O Next.js next/font faz isto automaticamente. Para WordPress puro, gera valores em fontsource.org ou faz copy-paste de exemplos canónicos.

Em resumo

Carregar Google Fonts via CDN custa 200-500ms por visita, gera CLS, e expõe o teu site a um problema RGPD ainda não fechado em Portugal. A solução é auto-hospedar — descarregar os .woff2 modernos do gwfh.mranftl.com, servi-los do teu domínio, com font-display: swap, subset latin/latin-ext, e variable fonts quando disponíveis. Preload só na fonte do título principal, e nunca mais do que uma família + um par de pesos. O ganho típico: PageSpeed sobe 10-15 pontos, LCP cai 200ms, CLS aproxima de zero. Para WordPress, plugin OMGF resolve em 10 minutos. Para Next.js, next/font faz tudo nativamente.

No sitesfixe.pt servimos sempre as fontes do próprio domínio — sem Google CDN, com font-display e subsetting otimizados desde o setup. Se queres que a tipografia do site contribua para o PageSpeed em vez de o estragar, fala connosco. Sites desde 1.500€.

Lê também:

Fontes

Precisas de um site ou loja online?

Agência digital portuguesa. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento