Bom dia,
Em questão de performance é indicado usar o google fonts?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Bom dia,
Em questão de performance é indicado usar o google fonts?
Oi Bruno, ótima pergunta! A resposta é bem complexa :)
A desvantagem do Google Fonts é que ele está em um hostname externo, o que vai exigir uma nova conexão extra (em geral 2, uma pro CSS e outra pras fontes mesmo).
E se vc carrega as fontes com um <link> normal como a maioria das pessoas, isso é blocante. Sendo blocante, pode ser bem ruim colocar 2 hostnames externos no critical path da sua página (dá pra aliviar fazendo o preconnect do segundo hostname por exemplo, mas ainda é pouco).
A vantagem do Google Fonts é o potencial para a fonte já estar cacheada na máquina do usuário por causa de uma visita eventual anterior a outro site que use a mesma fonte que vc. Mas, sei lá, é um tiro no escuro isso. Vc não sabe direito como tá o cache do usuário, mas sabe com certeza que 2 conexões a mais no critical path são ruins.
Se for carregar fontes da forma tradicional com @font-face e sem as customizações que o Google Fonts permite, aí talvez compense servir no seu próprio domínio. Dá pra colocar o CSS do @font-face inline na página ou fazer um server push. Dá pra fazer preload dos arquivos das fontes. E tudo no mesmo hostname com prioridade máxima de entrega.
Você perde, claro, o cache global entre sites que o Google Fonts em teoria poderia te dar.
Agora, isso tudo pensando que a fonte foi carregada com CSS via @font-face e está bloqueando o critical path. Digo isso pq existem outras formas de carregamento mais lazy que não são tão ruins pra performance. Têm outros tradeoffs, como causar um FOUT - Flash Of Unstyled Text. Mas podem ser apropriadas.
Dependendo do nível que quiser se aprofundar nisso, recomendo fortemente esse artigo com estratégias de carregamento de Web Fonts:
https://www.zachleat.com/web/comprehensive-webfonts/
Abraço