Auto-hospede fontes do Google para melhores Core Web Vitals

Auto-hospedagem de fontes do Google para Core Web Vitals aprimorados

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 solicitação do Google Fonts adiciona conexões externas, CSS que bloqueia a renderização e arquivos de fonte que você não pode pré-carregar, armazenar em cache ou controlar. Auto-hospedar essas mesmas fontes remove 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 classificação: LCP (carregamento), INP (interatividade) e CLS (estabilidade visual). Auto-hospedar 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, frequentemente incluído em páginas da web para aprimorar 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, essa é uma 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 de "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 seu cache HTTP por domínio de nível superior. Isso significa que seu site baixa o Google Fonts do zero para cada novo visitante, independentemente de quais outros sites eles visitaram. 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 diferentes domínios (como muitas pessoas parecem pensar). Isso significa que a folha de estilo de bloqueio de renderização nunca é servida do cache super rápido do navegador para visitantes de primeira viagem e sempre diminuirá a velocidade de renderização da página.

3. Ele requer 2 conexões para 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 de nossa conexão já aberta com o nosso servidor. Para evitar isso, o Google aconselha a pré-conectar aos 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 receberão a mesma configuração de font-display.

5. A localização final do arquivo woff2 é desconhecida. Isso significa que não podemos pré-carregar nossas fontes mais importantes. Consequentemente, nossos arquivos de fonte são colocados na fila para download relativamente tarde e provavelmente teremos uma mudança de layout visível causada pelo flash de texto não estilizado (FOUT). Leia mais sobre como garantir que o texto permaneça visível durante o carregamento da fonte da web.

6. Você não tem controle sobre os arquivos de fonte. Você não pode dividi-los ainda mais em subconjuntos, 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 da auto-hospedagem do Google Fonts

A auto-hospedagem do Google Fonts envolve o fornecimento de arquivos de fonte de seus próprios servidores em vez de depender de servidores externos do Google. Esta abordagem pode render vários benefícios:

1. Velocidade de entrega de fontes aprimorada: A auto-hospedagem de fontes reduz a dependência de servidores externos, resultando em uma entrega de fontes mais rápida e, consequentemente, em uma renderização mais rápida do conteúdo do texto. Essa 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 auto-hospedagem está em ascensão: 31,5% dos sites de desktop agora auto-hospedam exclusivamente suas fontes, contra 28% em 2024.

2. Mudanças de layout reduzidas: Ao auto-hospedar o Google Fonts, você pode controlar como a fonte é carregada e exibida, minimizando as chances de mudanças de layout causadas por atrasos 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 pré-carregamento: Quando você realiza a auto-hospedagem, você conhece o URL exato de cada arquivo de fonte. Isso significa que você pode pré-carregar fontes críticas, definir cabeçalhos de cache agressivos (um ano ou mais) e servir fontes da mesma conexão que o resto de sua página.

Conformidade com a GDPR

Em janeiro de 2022, o Tribunal Regional de Munique decidiu que carregar o Google Fonts a partir dos servidores do Google viola a GDPR porque transfere os endereços IP dos visitantes para o Google sem consentimento. A auto-hospedagem elimina esse problema totalmente porque nenhum dado é enviado ao Google quando as fontes são carregadas. Se o seu site tem visitantes europeus, esse é mais um motivo para auto-hospedar.

Melhores práticas para a auto-hospedagem do Google Fonts

Para otimizar suas fontes do Google auto-hospedadas para um melhor desempenho dos Core Web Vitals, considere implementar as seguintes melhores práticas:

1. Use apenas o formato WOFF2: O WOFF2 oferece a melhor compactação (cerca de 30% menor que o WOFF) e tem suporte de 96%+ nos 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 para WOFF.

2. Subconjunto de fontes: Para reduzir ainda mais o tamanho do arquivo da fonte, considere usar o subconjunto de fontes, que envolve incluir apenas os 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 Core Web Vitals aprimorados. O Google Fonts já cria subconjuntos por unicode-range, mas ao realizar a auto-hospedagem, você pode ir além com ferramentas como o 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" irá acelerar o First Contentful Paint garantindo que as fontes de fallback sejam exibidas até que a fonte da web esteja totalmente carregada. O valor "optional" irá pular a troca de fonte inteiramente, evitando mudanças de layout ao nunca substituir a fonte de fallback. Uma mistura estratégica desses dois otimizará frequentemente 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 máximo desempenho de CWV em fontes não críticas.

4. Pré-carregamento de fontes: Garanta que as fontes estejam disponíveis o mais cedo possível ao pré-carregar as fontes mais importantes (1 ou 2 no máximo) com o mecanismo de link preload. Sempre inclua o atributo crossorigin, mesmo para fontes da mesma origem, ou o navegador baixará a fonte duas vezes. Apenas 12% das páginas pré-carregam 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 auto-hospedar uma fonte do Google (da maneira certa)

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

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

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

2. Selecione a fonte que deseja usar e escolha os pesos de fonte que 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 o URL desta folha de estilo e abra em seu navegador. Você verá agora todas as declarações de 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 diferentes intervalos Unicode (unicode ranges). Para saber 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 guia Network e clique em Font. Agora atualize a página (Ctrl-R) para ver qual fonte é acionada para download.

6. Combine 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 o URL completo da fonte e abri-lo em seu navegador. Isso irá acionar um download para este arquivo de fonte. Copie este arquivo para o seu site.

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

9. Faça o pré-carregamento da fonte (se for uma fonte visualmente importante).

Agora você baixou e auto-hospedou com sucesso a fonte do Google de sua escolha.

Um exemplo da vida real

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

<head>
  <title>Fontes do Google Auto-Hospedadas</title>
  <!-- pré-carregar a fonte (crossorigin é necessário, mesmo para fontes de mesma origem) -->
  <link rel="preload" as="font" href="/fonts/inter-400.woff2" type="font/woff2" crossorigin>
  <style>
    /* Fonte Inter auto-hospedada com 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 um fallback de system-ui.</p>
</body>

Monitore o impacto

Após mudar para fontes auto-hospedadas, verifique a melhoria com o Real User Monitoring. Em nossos dados do CoreDash, sites que auto-hospedam suas fontes com o pré-carregamento adequado observam uma melhoria mediana de 180ms no LCP em comparação ao carregamento a partir da CDN do Google Fonts. Monitore seu LCP, CLS e FCP ao longo do tempo para garantir que a mudança esteja funcionando.