Hospede o Google Fonts por conta própria para melhorar as Core Web Vitals

Hospedagem Própria do Google Fonts para Melhorar as Core Web Vitals

O Google Fonts é usado em 54% de todos os sites, de acordo com o 2025 Web Almanac. A maioria desses sites carrega fontes dos servidores do Google. Isso é um problema. Cada requisição ao Google Fonts adiciona conexões externas, CSS que bloqueia a renderização e arquivos de fonte que você não pode fazer preload, cache ou controlar. Hospedar essas mesmas fontes por conta própria remove todos esses problemas e leva cerca de 10 minutos.

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

Entendendo as Core Web Vitals

As 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). Hospedar fontes por conta própria melhora principalmente o LCP e o CLS, e também pode melhorar o First Contentful Paint (FCP).

Impacto do Google Fonts nas Core Web Vitals

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

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

1. O argumento do "cache compartilhado" está morto. Muitos desenvolvedores ainda acreditam que, como o Google Fonts é tão popular, os visitantes provavelmente têm a fonte em cache de outro site. Isso era verdade antes de 2020. Desde o Chrome v86 e o Safari (que faz isso desde 2013), os navegadores particionam o cache HTTP por domínio de nível superior. Isso significa que seu site faz o download do Google Fonts do zero para cada novo visitante, independentemente de quais outros sites eles tenham visitado. O benefício 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 com o Google Fonts é que ele depende de uma folha de estilo externa hospedada por fonts.google.com ou fonts.googleapis.com. Esta folha de estilo não pode ser reutilizada por domínios diferentes (como muitas pessoas parecem pensar). Isso significa que a folha de estilo que bloqueia a renderização nunca é servida do cache super-rápido do navegador para visitantes de primeira viagem e sempre atrasará a renderização da página.

3. Isso requer 2 conexões com 2 novos servidores. O segundo problema é que, para baixar o arquivo CSS e os arquivos de fonte, temos que nos conectar a 2 servidores diferentes. Cada conexão inicial a um novo servidor tem uma sobrecarga séria e leva um tempo extra. Tempo que poderíamos ter economizado servindo os arquivos da nossa conexão já aberta para o nosso servidor. Para evitar isso, o Google aconselha preconnect para seus domínios. Isso mitigará um pouco o problema, mas ainda está longe de ser perfeito.

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

5. A localização final do arquivo woff2 é desconhecida. Isso significa que não podemos fazer preload de nossas fontes mais importantes. Isso significa que nossos arquivos de fonte são enfileirados para download relativamente tarde e provavelmente teremos um layout shift visível causado pelo flash de texto não estilizado (FOUT). Leia mais sobre como garantir que o texto permaneça visível durante o carregamento da webfont.

6. Você não tem controle sobre os arquivos de fonte. Você não pode dividi-los ainda mais, 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 Hospedar o Google Fonts por Conta Própria

Hospedar o Google Fonts por conta própria envolve servir os arquivos de fonte de seus próprios servidores em vez de depender dos servidores externos do Google. Esta abordagem pode trazer vários benefícios:

1. Velocidade de Entrega de Fonte Melhorada: Hospedar fontes por conta própria reduz a dependência de servidores externos, levando a uma entrega de fonte mais rápida e, consequentemente, a uma renderização mais rápida do conteúdo de texto. Esta melhoria pode impactar positivamente o LCP, garantindo que o maior elemento de texto se torne visível mais rapidamente. O 2025 Web Almanac mostra que a hospedagem própria está aumentando: 31,5% dos sites de desktop agora hospedam exclusivamente suas fontes por conta própria, contra 28% em 2024.

2. Layout Shifts Reduzidos: Ao hospedar o Google Fonts por conta própria, você pode controlar como a fonte é carregada e exibida, minimizando as chances de layout shifts causados pelo atraso na renderização da fonte. Isso ajuda a melhorar a estabilidade visual geral da sua página da web e afeta positivamente o CLS.

3. Controle total sobre cache e preloading: Ao hospedar por conta própria, você sabe a URL exata de cada arquivo de fonte. Isso significa que você pode fazer preload de fontes críticas, definir cabeçalhos de cache agressivos (um ano ou mais) e servir fontes da mesma conexão do resto da sua 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 porque transfere os endereços IP dos visitantes para o Google sem consentimento. A hospedagem própria elimina totalmente esse problema porque nenhum dado é enviado ao Google quando as fontes são carregadas. Se o seu site tem visitantes europeus, esta é mais uma razão para hospedar por conta própria.

Melhores Práticas para Hospedar o Google Fonts por Conta Própria

Para otimizar o Google Fonts hospedado por você para um melhor desempenho nas Core Web Vitals, considere a implementação das seguintes melhores práticas:

1. Use apenas o formato WOFF2: O WOFF2 oferece a melhor compressão (cerca de 30% menor que o WOFF) e tem mais de 96% de suporte dos navegadores. O único navegador que não suporta WOFF2 é o Internet Explorer, que chegou ao fim da vida útil em junho de 2022. Você não precisa mais de um fallback WOFF.

2. Subsetting de Fonte: Para reduzir ainda mais os tamanhos dos arquivos de fonte, considere usar o subsetting de fonte, que envolve a inclusão apenas dos caracteres necessários para o conteúdo da sua página da web. Isso pode levar a um carregamento de fonte mais rápido e melhorar as Core Web Vitals. O Google Fonts já faz subsetting por intervalo unicode, mas ao hospedar por conta própria você pode ir além com ferramentas como fonttools.

3. Atributo font-display estratégico: Configure o atributo font-display estrategicamente para controlar a renderização do texto durante o carregamento da fonte. O valor "swap" acelerará o First Contentful Paint ao garantir que as fontes de fallback sejam exibidas até que a web font esteja totalmente carregada. O valor "optional" pulará totalmente a troca de fonte, evitando layout shifts ao nunca substituir a fonte de fallback. Uma mistura estratégica destes dois muitas vezes otimizará tanto o Cumulative Layout Shift quanto o First Contentful Paint. De acordo com 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 desempenho máximo de CWV em fontes não críticas.

4. Preload de fontes: Garanta que as fontes estejam disponíveis o mais cedo possível fazendo preload das fontes mais importantes (1 ou 2 no máximo) com o mecanismo link preload. Sempre inclua o atributo crossorigin, mesmo para fontes da mesma origem, ou o navegador fará o download da fonte duas vezes. Apenas 12% das páginas fazem preload de suas fontes, então esta é uma vitória fácil.

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

Como hospedar uma fonte do Google (do jeito certo)

Baixar e hospedar uma Google Font leva cerca de 10 minutos. Tenha em mente que você deve sempre revisar a licença da fonte antes de usá-la. A maioria das Google Fonts está disponível sob a SIL Open Font License, que permite o uso gratuito, incluindo uso comercial.

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

1. Vá para o site do Google Fonts em fonts.google.com.

2. Selecione a fonte que você deseja usar e escolha os pesos de fonte que você deseja incluir.

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

   

4. Copie a URL desta folha de estilo e abra-a no seu navegador. Você agora 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 usado apenas um arquivo de fonte. Isso ocorre porque há um arquivo de fonte diferente para intervalos unicode diferentes. Para aprender quais fontes devemos baixar, você deve adicionar temporariamente a folha de estilo hospedada pelo Google ao seu site. Use o atalho Ctrl-Shift-I para abrir o Chrome DevTools. Navegue até a aba Network e clique em Font. Agora atualize a página (Ctrl-R) para ver qual fonte é acionada para download.

6. Corresponda o nome deste arquivo de fonte ao arquivo woff2 correspondente na folha de estilo. Agora você sabe qual arquivo de fonte é usado para o seu site!

7. O próximo passo é copiar a URL completa da fonte e abri-la no seu navegador. Isso acionará um download para este arquivo de fonte. Copie este arquivo para o seu site.

8. Copie o CSS para a webfont usada no passo 7 e cole no seu stylesheet. 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 preload da fonte (se for uma fonte visualmente importante).

Agora você baixou e hospedou com sucesso a Google Font de sua escolha.

Um exemplo da vida real

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

<head>
  <title>Self-Hosted Google Fonts</title>
  <!-- preload the font (crossorigin is required, even for same-origin fonts) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Self-hosted Inter font with WOFF2 format */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      src: url('/fonts/inter-400.woff2') format('woff2');
      font-display: optional;
    }

    /* Fallback to system-ui font */
    body {
      font-family: 'Inter', system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This page uses Inter with a system-ui fallback.</p>
</body>

Monitore o impacto

Após mudar para fontes hospedadas por você, verifique a melhoria com Real User Monitoring. Em nossos dados do CoreDash, os sites que hospedam suas fontes com preloading adequado veem uma melhoria mediana de LCP de 180ms em comparação com o carregamento da CDN do Google Fonts. Acompanhe seu LCP, CLS e FCP ao longo do tempo para ter certeza de que a mudança está funcionando.