Motivos para hospedar as fontes do Google Fonts localmente
Tags: braziliandevs, webdev
Published: 2022-12-19 20:30:56

### 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:

```html
<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">
```

O Google entrega a fonte pela sua [CDN](https://www.cloudflare.com/pt-br/learning/cdn/what-is-a-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](https://sia.codes/posts/making-google-fonts-faster/#warm-up-that-connection-faster-with-preconnect). 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:

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

Quando um site é carregado pela primeira vez, acontece o [critical rendering](https://sia.codes/posts/making-google-fonts-faster/#should-i-use-%3Clink%3E-or-%40import%3F). 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](https://www.techaddressed.com/random/4-reasons-self-host-google-fonts/#:~:text=3%20%E2%80%93%20FULL%20CONTROL%20OVER%20CACHING%20%26%20IMPLEMENTATION) é 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](https://www.techaddressed.com/random/4-reasons-self-host-google-fonts/#:~:text=4%20%E2%80%93%20FASTER%20THAN%20GOOGLE).

---

## Como usar a fonte localmente?

Chegamos na parte mais simples do texto. O [majodev](https://github.com/majodev) criou um site incrível para quem quer hospedar suas fontes do Google localmente.

Basta selecionar sua fonte no [google-webfonts-helper](https://gwfh.mranftl.com/fonts) 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? 👀