How to Reduce the File Size of Google Fonts for your Website

H
Published in: Fonts

Google Fonts is a collection of open fonts that you can use in your websites, documents and other design projects without any restrictions around licensing.

It takes a single line of code to embed any of the Google Font families into your website design. Just substitute the font family in the following code (line #2) with the name of Google Font and copy-paste it inside the <head> tag of your HTML template.

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=GOOGLE_FONT">

Page Speed and Google Web Fonts

While Google Fonts can make your website look good, there’s one related problem – they increase the page load time of your website because the font files have to downloaded on the visitor’s computer and some of them, like the Cabin Sketch font, can exceed 100 KB in size.

Google Fonts

There is however an easy workaround to help you reduce the file size of the Google Fonts so that they do not reduce the load time of a web page. Instead of using the entire Google font family, you can specify a limited set of letters or digits that are used in your text and Google will dynamically generate a new font file containing only the requested characters.

How to Reduce the Size of Google Font Files

All you have to do is add a new text parameter to the Google font request URL and value of this parameter will have all the letters that you need.

For instance, if I need to render the text Digital Inspiration in Cabin Sketch font, the modified CSS requesting the Google font file will look something like this:

<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch&text=YOUR_TEXT_HERE'
    rel='stylesheet' type='text/css' />

The original Google font file was around 101 kb but with this limited text, the font file is reduced to 7.6 KB.

google_fonts_characters

Google Fonts are commonly used to render the text of logos and and headings (h1, h2, h3, etc.) on a web page so you can modify the CSS accordingly. Alternatively, if you wish to request all alphabets and numerals in the Google Font but none of the extra glyphs, your font CSS will looking something like this:

<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20'
  rel='stylesheet' type='text/css' />

The font file in this case is 37 KB in size and that’s still 64% lower than the original Google font file. Also, if you are wondering why I have included %20 in the text list, it represents the encoded space character. Similarly, you can add %27 and %22 to the list for single quote (’) and double quote (”) respectively.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Fonts

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube