An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Some of Our Sources
- Slashdot
- Techcrunch
- Web Designer Wall
- Joshua Blankenship
- Smashing Magazine
- Web Designer Depot
- Noupe
- Specky Boy
- Android Dissected
- Codrops
Help Webnuz
Referal links:
Motivos para hospedar as fontes do Google Fonts localmente
Fontes do Google ainda mais rpidas atravs 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 dvidas e solues que encontrei durante minhas pesquisas, bora l:
Link no <head> ou @import?
A primeira dvida se importo a fonte com a tag <link> ou usando o @import no CSS, pois o prprio site da Google compartilha essas duas opes.
Importar a fonte na tag <head> nos ltimos tempos tem sido minha opo 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 rpida e confivel.
Para ficar ainda mais performtico, a dona Google j adicionou o preconnect no cdigo que copiamos do site. Como o prprio nome diz, fazemos a pr-conexo com o Google Fonts. Dessa forma, fica mais rpido quando o navegador vai baixar a fonte e exibi-la para o usurio.
A segunda opo 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 usurio pode comear a interagir com o site.
Por isso, para evitar que o usurio fique travado enquanto a fonte est baixando junto com seu arquivo CSS, prefira a opo de importar a fonte pela tag <head>.
Por que usar fontes self-host?
Se a CDN do Google j to perfeita, por que eu pensaria em hospedar minha fonte?
Bom, primeiro porque o site do Google Fonts pode cair e voc no 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 so open-source, e nem sempre esto na sua verso mais atualizada no Google Fonts. Voc pode simplesmente ir no source code da sua fonte, baixar a verso mais recente e usar. No 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 no menos importante: mais rpido! E quanto mais rpido, melhor.
Eita, mas o Google mais rpido que meu site? A resposta curta : nesse caso SIM! Quanto menos recursos de domnios externos voc precisar acessar para exibir o seu site, menor a latncia e melhor a performance. Voc pode ler a explicao tcnica aqui.
Como usar a fonte localmente?
Chegamos na parte mais simples do texto. O majodev criou um site incrvel para quem quer hospedar suas fontes do Google localmente.
Basta selecionar sua fonte no google-webfonts-helper e seguir as instrues do site. Fcil assim!
E a, voc tambm tinham algumas dessas dvidas sobre Google Fonts? Qual forma decidiram utilizar aps esse texto?
Original Link: https://dev.to/compiladoras/motivos-para-hospedar-as-fontes-do-google-fonts-localmente-1d50
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To