Minimizing Google Fonts by Only Loading it for Certain Characters

Amit Merchant · February 20, 2022 ·

When it comes to using custom fonts on websites, the de-facto way to do currently is to use the Google Fonts.

Now, most people would add direct URLs to the fonts provided by Google Fonts instead of self-hosting them like so.

<link 
    href="https://fonts.googleapis.com/css2?family=Roboto+Serif" 
    rel="stylesheet"
>

This works fine but here’s a scenario. Let’s say you want to use a custom font only for certain characters.

For instance, I want to use the Roboto Serif fonts only for my site title “Amit Merchant”. In such a case, it doesn’t make sense to load the entire font file since we only need a handful of characters for the title.

Google Fonts provides a way to optimize this.

The text parameter

For the scenario I just described, you can append an additional query parameter text to the font request URL. This allows Google to return a font file that’s optimized for your request. In some cases, this can reduce the size of the font file by up to 90%.

So, if I only want to load the font file for the characters in “Amit Merchant”, here’s how I can do it.

<link 
    href="https://fonts.googleapis.com/css2?family=Roboto+Serif&text=Amit%20Merchant" 
    rel="stylesheet"
>

Doing this can effectively reduce the size of the font file by up to 90% and in turn optimize the overall font request!

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?