31/05/2026

Para de usar Google Fonts: self-host com @fontsource é mais rápido e mais simples do que parece

O argumento do cache compartilhado do Google Fonts morreu em 2020. Hoje self-host via @fontsource elimina conexões externas bloqueantes e melhora LCP sem depender de servidor externo.

Quando coloquei as fontes nesse site, fiz o que todo mundo faz: entrei no Google Fonts, copiei os três <link> que ele gera e colei no <head>. Inter e Outfit, carregadas do jeito “certo”.

Rodei um audit de performance semanas depois e apareceu isso:

Render-blocking requests — Est savings of 530 ms fonts.googleapis.com — 270ms

Duzentos e setenta milissegundos bloqueando o render da página inteira. Por causa de fontes.

O problema com Google Fonts

O Google Fonts gera três tags no <head>:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter..." rel="stylesheet" />

O que acontece na prática quando alguém entra no site:

Browser pede o CSS de fontes para fonts.googleapis.com
Espera a resposta (DNS + TCP + TLS + requisição)
CSS chega com as URLs dos arquivos .woff2 em fonts.gstatic.com
Browser faz outra conexão, pede os .woff2
Enquanto isso, o render da página está parado esperando

O rel="preconnect" ajuda, mas não elimina o bloqueio. A conexão ainda é externa, ainda tem latência, e o browser ainda precisa esperar antes de renderizar qualquer texto.

”Mas as fontes ficam cacheadas no Google”

Esse argumento circulou muito. A lógica era: todo mundo usa Inter via Google Fonts, então quando alguém entra no seu site já tem a fonte cacheada de outro site que visitou antes. Zero download.

Isso não funciona mais desde 2020.

O Chrome implementou cache partitioning: o cache de recursos é isolado por domínio. Um .woff2 baixado de fonts.gstatic.com para o site A não é reaproveitado quando o site B pede o mesmo arquivo. Cada site começa do zero, sempre.

Firefox e Safari seguiram o mesmo caminho. O cache compartilhado acabou.

O que muda com self-host

Com @fontsource, os arquivos .woff2 ficam dentro do seu próprio bundle e são servidos pelo seu CDN. O browser baixa tudo do mesmo domínio, sem round-trips externos, sem conexões bloqueantes.

A comparação:

	Google Fonts	Self-host (@fontsource)
Cache compartilhado entre sites	Não (desde 2020)	Não
Conexões externas bloqueantes	2 (googleapis + gstatic)	0
Render-blocking	Sim	Não
Envia IP do usuário ao Google	Sim	Não

O item de privacidade raramente é o motivo principal para migrar, mas vale conhecer: toda requisição ao Google Fonts passa o IP do visitante para os servidores do Google. Para a maioria dos sites brasileiros isso não muda nada na prática. Para projetos com clientes europeus, porém, já houve decisões judiciais na Alemanha condenando sites por repassar IPs ao Google via Google Fonts sem consentimento explícito, sob o GDPR. Se você atende esse mercado, self-host elimina esse risco sem nenhum esforço extra.

Como migrar em Astro

Instalação:

pnpm add @fontsource-variable/inter @fontsource-variable/outfit

No global.css, antes de qualquer outro import:

@import '@fontsource-variable/inter';
@import '@fontsource-variable/outfit';
@import 'tailwindcss';

No Layout.astro, remove os três <link> do Google Fonts:

<!-- remove isso: -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter..." rel="stylesheet" />

Pronto. Nada mais muda: os nomes das famílias continuam os mesmos ('Inter', 'Outfit'), o CSS que você já tem continua funcionando.

Fontes variáveis vs. estáticas

Esse detalhe importa na hora de pensar em otimização.

Com fontes estáticas (o pacote @fontsource/inter, sem o -variable), cada peso é um arquivo .woff2 separado. Se você carregar Inter 400, 600 e 700, são três arquivos. Faz sentido carregar só os pesos que usa.

Com fontes variáveis (@fontsource-variable/inter), o arquivo .woff2 cobre um range contínuo de pesos (100-900). É um arquivo maior, mas é um arquivo só. Cortar “pesos” não reduz o número de requests nem o tamanho do download.

A única granularidade que existe na versão variável é separar o arquivo normal do italic: /wght.css vs. /wght-italic.css. Vale fazer só se você realmente não usa itálico em lugar nenhum. Se tem <em> em posts de blog, blockquotes, ou italic no CSS, precisa do arquivo italic.

Resultado

Após a migração, o audit de performance deixou de apontar render-blocking de fontes. Os 270ms saíram do caminho crítico.

O ganho real não é só velocidade: é simplificar a arquitetura. Menos dependências externas, menos pontos de falha, menos dados de visitantes trafegando por terceiros.

Se você está começando um projeto agora, já começa com @fontsource. Se tem um projeto existente, a migração leva menos de dez minutos.

Se você quer ir além da performance de fonte e preparar o site inteiro pra ser lido por agentes de IA, o Lighthouse Agentic Browsing é o próximo passo: nova categoria do Chrome que mede se agentes como ChatGPT, Perplexity e Claude conseguem operar o seu site.

Resumo

Google Fonts bloqueia o render da página por causa de conexões externas
O cache compartilhado entre sites não existe mais desde 2020 (cache partitioning)
@fontsource-variable serve as fontes do seu próprio CDN, sem round-trips externos
A migração em Astro é trocar três <link> por dois @import no CSS
Com fontes variáveis, não há ganho em filtrar pesos: o arquivo cobre o range inteiro

Referências

web.dev. CSS and Network Performance
web.dev. Prevent Render-Blocking Resources
Mozilla. Double-keyed HTTP Cache
Fontsource. Getting Started
Sia Karamalegos. Making Google Fonts Faster

#frontend #performance #astro