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

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.

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

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.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

0

Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.