Get "PHP 8 in a Nuthshell" (Soon includes PHP 8.4)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Minimizing Google Fonts by Only Loading it for Certain Characters

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!

Like this article?

Buy me a coffee

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?