Otimizando uso do Google Fonts carregando somente caracteres necessários

12/08/2022 tipsfrontend

Em algumas situações, ao utilizar uma fonte customizada para seu site, você não precisa que a fonte inteira seja enviada para o usuário. Esse é o caso de quando a fonte vai ser utilizada para somente uma palavra ou texto específico.

No caso do Google Fonts, existe um parâmetro que irá dizer ao Google exatamente quais são caracteres que você precisa, e isso vai fazer o carregamento da fonte ser mais rápido e leve para a pessoa que estiver visitando sua página.

Como fazer

O parâmetro é o text, ele é usado no href da tag link onde você importa a fonte.

Aqui no camelo.me, por exemplo, uso a fonte Pacifico para somente o título do blog. Então, para economizar alguns kilobytes da internet de quem está vendo a página, meu import fica assim:

<link href="https://fonts.googleapis.com/css2?family=Pacifico&text=camelo." rel="stylesheet">

Vale notar que usei camelo. em vez de camelo.me, e isso funciona pois o me no final seriam caracteres repetidos, já que já estão dentro de camelo., mas isso é só preciosismo da minha parte e você não precisa fazer o mesmo 😅.