DEV Community

Cover image for Motivos para hospedar as fontes do Google Fonts localmente
Bianca Pereira for Comunidade Cafeína

Posted on

Motivos para hospedar as fontes do Google Fonts localmente

Fontes do Google ainda mais rápidas através de self-host

Toda vez que eu vou usar alguma fonte do Google Fonts eu sempre me pergunto qual a melhor abordagem para isso.

Nesse artigo vou percorrer algumas das minhas dúvidas e soluções que encontrei durante minhas pesquisas, bora lá:


Link no <head> ou @import?

A primeira dúvida é se importo a fonte com a tag <link> ou usando o @import no CSS, pois o próprio site da Google compartilha essas duas opções.


Importar a fonte na tag <head> nos últimos tempos tem sido minha opção favorita, especialmente em projetos pessoais:

<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=Be+Vietnam+Pro&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

O Google entrega a fonte pela sua CDN, que por si só já é muito rápida e confiável.

Para ficar ainda mais performático, a dona Google já adicionou o preconnect no código que copiamos do site. Como o próprio nome diz, fazemos a pré-conexão com o Google Fonts. Dessa forma, fica mais rápido quando o navegador vai baixar a fonte e exibi-la para o usuário.


A segunda opção é importar a fonte diretamente no arquivo de CSS:

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro&display=swap');
Enter fullscreen mode Exit fullscreen mode

Quando um site é carregado pela primeira vez, acontece o critical rendering. Apenas depois que esse carregamento inicial é feito que o usuário pode começar a interagir com o site.

Por isso, para evitar que o usuário fique travado enquanto a fonte está baixando junto com seu arquivo CSS, prefira a opção de importar a fonte pela tag <head>.


Por que usar fontes self-host?

Se a CDN do Google já é tão perfeita, por que eu pensaria em hospedar minha fonte?

Bom, primeiro porque o site do Google Fonts pode cair e você não tem controle disso por ser um site terceiro. É raro, mas pode acontecer.

O segundo ponto seria o controle total das suas fontes. As fontes do Google são open-source, e nem sempre estão na sua versão mais atualizada no Google Fonts. Você pode simplesmente ir no source code da sua fonte, baixar a versão mais recente e usar. Não precisa ficar esperando a dona Google atualizar pra gente. 😉 Se o controle de cache é importante para você, só fica ainda mais vantajoso.

E terceiro e não menos importante: é mais rápido! E quanto mais rápido, melhor. 🚀

Eita, mas o Google é mais rápido que meu site? A resposta curta é: nesse caso SIM! Quanto menos recursos de domínios externos você precisar acessar para exibir o seu site, menor a latência e melhor a performance. Você pode ler a explicação técnica aqui.


Como usar a fonte localmente?

Chegamos na parte mais simples do texto. O majodev criou um site incrível para quem quer hospedar suas fontes do Google localmente.

Basta selecionar sua fonte no google-webfonts-helper e seguir as instruções do site. Fácil assim! 🎉


E aí, você também tinham algumas dessas dúvidas sobre Google Fonts? Qual forma decidiram utilizar após esse texto? 👀

Top comments (0)