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:
~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:
~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! 💙
Nice, but I´d make an SVG if it is only for some letters.
☝ UI/UX/ML | ✍️ Technology Blogger | 🎤 Speaker
David Ojeda, This is a great tip. Thanks for the write-up.
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.
Co-Founder, Hashnode
Wow! Awesome tip. Added to my TIL. 🙌
Full Stack Software Engineer
I was just picking out custom fonts for a project. I'll try this update next time I'm working on it.
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!
Comments (18)