search

getninjas / gaiden

GetNinjas Styleguide
https://getninjas.github.io/gaiden
MIT License
30 stars 4 forks source link

Traz a fonte lato para dentro do projeto #233

Closed tadeusrox closed 4 years ago

tadeusrox commented 4 years ago

CHANGELOG :memo:

Porque?

O motivo principal é pelo modo que as fontes são carregadas do google! Trazendo as fontes para dentro do projeto não é necessário esperar o connect com o google para carregar.

quem tira vantagem disso é o display: swap do font face.

Um exemplo +- prático de como isso acontece. (não sou muito didático acho)

Imagina o scneario onde:

Conectar com o Google demora 3 segundos.

Baixar o CSS do projeto demora 2 segundos.

Carregar as fontes demoram 10 segundos.

Sem self hosting

O CSS é carregado em 2 segundos. As página só começa a ser renderizada em 3 segundos (espera o google). No fonte display: swap ele vai esperar até o segundo 10 onde vai mostrar a fonte Lato.

Com self hosting

O CSS é carregado em 2 segundos. A página começa assim que o CSS é carregado. No fonte display: swap ele vai esperar até o segundo 10 onde vai mostrar a fonte Lato.

Referencias

https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/ https://medium.com/clio-calliope/making-google-fonts-faster-aadf3c02a36d

pyymenta commented 4 years ago

@getninjas/frontend

codeclimate[bot] commented 4 years ago

Code Climate has analyzed commit 0b04beef and detected 66 issues on this pull request.

Here's the issue category breakdown:

Category Count
Style 66

View more on Code Climate.