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">
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');
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)