Auto-hospedar o Google Fonts para melhorar os Core Web Vitals

Auto-hospedar o Google Fonts para melhorar os Core Web Vitals

O Google Fonts é usado em 54% de todos os sites, segundo o 2025 Web Almanac. A maioria desses sites carrega as fontes dos servidores do Google. Isso é um problema. Cada requisição ao Google Fonts adiciona conexões externas, CSS render blocking e arquivos de fonte que você não consegue fazer preload, armazenar em cache nem controlar. Auto-hospedar essas mesmas fontes elimina todos esses problemas e leva cerca de 10 minutos.

Última revisão por Arjen Karel em fevereiro de 2026

Entendendo os Core Web Vitals

Os Core Web Vitals são três métricas que o Google usa como sinais de ranqueamento: LCP (carregamento), INP (interatividade) e CLS (estabilidade visual). Auto-hospedar as fontes melhora principalmente o LCP e o CLS, e também pode melhorar o First Contentful Paint (FCP).

Impacto do Google Fonts nos Core Web Vitals

O Google Fonts, muitas vezes incluído em páginas para melhorar a tipografia e o design, pode ter um impacto significativo nos Core Web Vitals, principalmente no Largest Contentful Paint (LCP) e no Cumulative Layout Shift (CLS).

Para a maioria das pessoas com quem converso, isso é novidade. A CDN do Google deveria ser a melhor do mundo. Então por que o Google Fonts é ruim para a velocidade da página?

1. O argumento do "cache compartilhado" morreu. Muitos desenvolvedores ainda acreditam que, como o Google Fonts é muito popular, os visitantes provavelmente já têm a fonte no cache de outro site. Isso era verdade antes de 2020. Desde o Chrome v86 e o Safari (que já faz isso desde 2013), os navegadores particionam o cache HTTP por domínio de nível superior. Isso significa que o seu site baixa o Google Fonts do zero para cada novo visitante, independentemente de quais outros sites ele visitou. O ganho de desempenho de um cache de CDN compartilhado não existe mais.

2. A folha de estilo nunca está no cache do navegador para novos visitantes. O primeiro problema do Google Fonts é que ele depende de uma folha de estilo externa hospedada em fonts.google.com ou fonts.googleapis.com. Essa folha de estilo não pode ser reutilizada por domínios diferentes (como muita gente pensa). Isso significa que a folha de estilo render blocking nunca é servida pelo cache ultrarrápido do navegador para quem acessa pela primeira vez, e sempre vai atrasar a renderização da página.

3. São necessárias 2 conexões com 2 servidores novos. O segundo problema é que, para baixar o arquivo CSS e os arquivos de fonte, precisamos nos conectar a 2 servidores diferentes. Cada conexão inicial a um novo servidor gera um overhead significativo e consome tempo extra. Um tempo que poderíamos economizar servindo os arquivos pela conexão já aberta com o nosso servidor. Para evitar isso, o Google recomenda fazer preconnect aos seus domínios. Isso ameniza um pouco o problema, mas ainda está longe do ideal

4. Você tem controle limitado sobre o atributo font-display. Embora o Google Fonts permita definir o atributo font-display, você só pode configurá-lo globalmente. Isso significa que todos os arquivos woff2 receberão a mesma configuração de font-display.

5. A localização final do arquivo woff2 é desconhecida. Isso significa que não conseguimos fazer o preload das fontes mais importantes. Com isso, os arquivos de fonte entram na fila de download relativamente tarde e provavelmente teremos um layout shift visível causado pelo flash of unstyled text (FOUT). Leia mais sobre como garantir que o texto permaneça visível durante o carregamento de webfonts.

6. Você não tem controle sobre os arquivos de fonte. Você não pode fazer um subsetting mais agressivo, não pode definir cabeçalhos de cache longos e não pode servi-los da sua própria CDN.

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Vantagens de auto-hospedar o Google Fonts

Auto-hospedar o Google Fonts consiste em servir os arquivos de fonte dos seus próprios servidores em vez de depender dos servidores externos do Google. Essa abordagem traz várias vantagens:

1. Maior velocidade na entrega das fontes: Auto-hospedar fontes reduz a dependência de servidores externos, agilizando a entrega das fontes e, consequentemente, a renderização do conteúdo em texto. Essa melhoria impacta positivamente o LCP, garantindo que o maior elemento de texto fique visível mais rápido. O 2025 Web Almanac mostra que a auto-hospedagem está em alta: 31,5% dos sites para desktop agora auto-hospedam suas fontes com exclusividade, contra 28% em 2024.

2. Redução de layout shifts: Ao auto-hospedar o Google Fonts, você controla como a fonte é carregada e exibida, minimizando as chances de layout shifts causados pelo atraso na renderização da fonte. Isso melhora a estabilidade visual geral da página e beneficia o CLS.

3. Controle total sobre cache e preload: Quando você auto-hospeda, sabe a URL exata de cada arquivo de fonte. Isso significa que você pode fazer o preload de fontes críticas, definir cabeçalhos de cache agressivos (um ano ou mais) e servir as fontes pela mesma conexão do restante da página.

Conformidade com a GDPR

Em janeiro de 2022, o Tribunal Regional de Munique decidiu que carregar o Google Fonts dos servidores do Google viola a GDPR, pois transfere os endereços IP dos visitantes para o Google sem consentimento. A auto-hospedagem elimina esse problema por completo, já que nenhum dado é enviado ao Google no carregamento das fontes. Se o seu site recebe visitantes europeus, esse é mais um motivo para auto-hospedar.

Melhores práticas para auto-hospedar o Google Fonts

Para otimizar o Google Fonts auto-hospedado e obter um melhor desempenho nos Core Web Vitals, aplique as seguintes práticas recomendadas:

1. Use apenas o formato WOFF2: O WOFF2 oferece a melhor compactação (cerca de 30% menor que o WOFF) e é compatível com mais de 96% dos navegadores. O único navegador incompatível com o WOFF2 é o Internet Explorer, descontinuado em junho de 2022. Você não precisa mais de fallback em WOFF.

2. Subsetting de fontes: Para reduzir ainda mais o tamanho dos arquivos de fonte, use subsetting de fontes, incluindo apenas os caracteres necessários para o conteúdo da página. Isso acelera o carregamento das fontes e melhora os Core Web Vitals. O Google Fonts já faz o subsetting por unicode-range, mas ao auto-hospedar você pode ir além com ferramentas como o fonttools.

3. Uso estratégico do atributo font-display: Configure o atributo font-display estrategicamente para controlar a renderização do texto durante o carregamento da fonte. O valor "swap" agiliza o First Contentful Paint ao garantir que as fontes de fallback sejam exibidas até a webfont carregar por completo. O valor "optional" pula a troca de fontes por completo, evitando layout shifts ao nunca substituir a fonte de fallback. Uma combinação estratégica dos dois costuma otimizar tanto o Cumulative Layout Shift quanto o First Contentful Paint. Segundo o 2025 Web Almanac, 50% das páginas agora usam font-display: swap, mas apenas 0,5% usam font-display: optional, que é a melhor escolha para o máximo desempenho nos Core Web Vitals em fontes não críticas.

4. Preload de fontes: Garanta que as fontes fiquem disponíveis o mais cedo possível fazendo o preload das fontes mais importantes (no máximo 1 ou 2) com o mecanismo de link preload. Sempre inclua o atributo crossorigin, mesmo para fontes da mesma origem, senão o navegador vai baixar a fonte duas vezes. Apenas 12% das páginas fazem preload de suas fontes, então esse é um ganho fácil.

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

Como auto-hospedar uma fonte do Google (do jeito certo)

Baixar e auto-hospedar uma fonte do Google leva cerca de 10 minutos. Lembre-se de sempre revisar a licença da fonte antes de usá-la. A maioria das fontes do Google está disponível sob a SIL Open Font License, que permite o uso gratuito, inclusive comercial.

O método mais rápido é usar o google-webfonts-helper, que permite baixar qualquer fonte do Google como arquivos WOFF2 com o CSS pronto para uso. Mas se você quiser fazer isso manualmente para entender exatamente o que está acontecendo, siga estes passos:

1. Acesse o site do Google Fonts em fonts.google.com.

2. Selecione a fonte que deseja usar e escolha os pesos que quer incluir.

3. Na página da fonte, clique no botão 'selected families' na barra superior. Lá você encontrará o link para a folha de estilo hospedada pelo Google.

   

4. Copie a URL dessa folha de estilo e abra no navegador. Agora você verá todas as declarações font-face disponíveis para a fonte.

   

5. Você pode notar que há mais de 1 arquivo woff2, embora tenhamos selecionado apenas uma fonte. Isso acontece porque existe um arquivo de fonte diferente para cada unicode range. Para descobrir quais fontes devemos baixar, adicione temporariamente ao seu site a folha de estilo hospedada pelo Google. Use o atalho Ctrl+Shift+I para abrir o Chrome DevTools. Vá até a aba Network e clique em Font. Agora atualize a página (Ctrl+R) para ver qual fonte é solicitada para download.

6. Compare o nome desse arquivo de fonte com o arquivo woff2 correspondente na folha de estilo. Pronto: agora você sabe qual arquivo de fonte é usado no seu site!

7. O próximo passo é copiar a URL completa da fonte e abri-la no navegador. Isso vai iniciar o download desse arquivo de fonte. Copie esse arquivo para o seu site.

8. Copie o CSS da webfont utilizada no passo 7 e cole na sua folha de estilo. Não se esqueça de alterar a URL da CDN do Google para o seu próprio servidor (por exemplo, '/fonts/inter-400.woff2').

9. Faça o preload da fonte (se for uma fonte visualmente importante).

Agora você baixou e auto-hospedou com sucesso a fonte do Google que escolheu.

Um exemplo real

Veja um exemplo completo usando a fonte Inter com todas as melhores práticas aplicadas: preload, apenas WOFF2, um valor estratégico de font-display e fallback para fonte do sistema.

<head>
  <title>Google Fonts auto-hospedado</title>
  <!-- preload da fonte (crossorigin é obrigatório, mesmo para fontes da mesma origem) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Fonte Inter auto-hospedada no formato WOFF2 */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback para a fonte system-ui */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Bem-vindo ao meu site</h1>
  <p>Esta página usa Inter com fallback para system-ui.</p>
</body>

Monitore o impacto

Depois de migrar para fontes auto-hospedadas, comprove a melhoria com Real User Monitoring. Nos dados do CoreDash, os sites que auto-hospedam fontes com o preload correto têm uma melhoria mediana de 180 ms no LCP em comparação com o carregamento pela CDN do Google Fonts. Monitore seu LCP, CLS e FCP ao longo do tempo para garantir que a mudança está funcionando.