Reduce Google Fonts file size by more than 80%

Sometimes we only need a font for a couple of words, like a logo or slogan. Why do we download the whole font file if we only need a few letters?

In this post, I'll show you how you can reduce your font file size by more than 80%. This size reduction will be more effective the fewer characters you need.

Base HTML

This is the base HTML we'll use. It contains the Roboto font and two headers. One with Roboto font-family and the other with the default font:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

</head>
<body>
  <h1 style="font-family: 'Roboto', sans-serif;">David Ojeda</h1>
  <h2>Default font</h2>
</body>
</html>

Measuring current font file size

If you open this file with your browser and open the network tab of the Developer Console, you would see this:

Developer console "Network" tab for previous HTML

~657 bytes for the Google Fonts API call and ~11.1 kB for the actual Roboto font.

If you look at the HTML again, you can notice that we're only using the font for my name, David Ojeda. What if we could download only those letters? It turns out we can.

Changing the font URL

We need to change the font URL from this:

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

to this:

<link href="https://fonts.googleapis.com/css2?family=Roboto&text=David%20Ojeda" rel="stylesheet">

What's new? The &text= URL parameter. We'll only download the characters we need. Just remember, the text parameter value:

  • Is case-sensitive.
  • Needs to be URL encoded.

Measuring updated font file size

Let's measure the size of the file now:

Developer console "Network" tab for updated HTML

~359 bytes for the Google Fonts API call and ~1.3 kB for the actual Roboto font. That's like 89% file reduction for the font!

Wrap up

I found this implementation in the Google Fonts documentation days ago, and I wanted to share it so more people know about it.

It saved me this 80-90% file size on my personal finance blog, and I'm sure it can help others do the same.

Thanks for reading me! πŸ’™

Kobi Kobsen's photo

Nice, but IΒ΄d make an SVG if it is only for some letters.

David Ojeda's photo

That can work too!

Shannon Crabill's photo

I was just picking out custom fonts for a project. I'll try this update next time I'm working on it.

Kishore's photo

This is one of the best hack I read.

Damien Guard's photo

For popular fonts this will likely be slower and use more network access.

If they have already visited a site that uses the font you use by putting ?text= on the end you're forcing the browser to go off to Google to get your subset even though the full font file is sitting their in their browsers disk cache.

Julian Wagner's photo

Lovely. I want to add that you can do the same thing with fonts you have bought somewhere else with a free tool like fontforge. I recommend this to everyone who has a high-traffic landing page. It’s pure money!

David Ojeda's photo

Thanks for the extra tip!

Sandeep Panda's photo

Wow! Awesome tip. Added to my TIL. πŸ™Œ

David Ojeda's photo

Thanks! Glad you learned something with my post πŸ™ŒπŸΌ

Tapas Adhikary's photo

David Ojeda, This is a great tip. Thanks for the write-up.

David Ojeda's photo

Thanks to you for the Bootcamp session, Tapas!