Optimizing Google Fonts usage by loading only necessary characters

In some situations, when using a custom font for your site, you don't need the entire font to be sent to the user. This is the case when the font will be used for only one word or specific text.

For Google Fonts, there is a parameter that will tell Google exactly which characters you need, and this will make the font load faster and lighter for the person visiting your page.

How to do it

The parameter is text, and it is used in the href of the link tag where you import the font.

Here on camelo.me, for example, I use the Pacifico font for only the blog title. So, to save a few kilobytes of bandwidth for those viewing the page, my import looks like this:

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

It's worth noting that I used camelo. instead of camelo.me, and this works because the me at the end would be repeated characters, as they are already within camelo., but this is just me being meticulous, and you don't need to do the same 😅.