Reducing the file size of Google Fonts for your website

5 Mar. 2021 | Updated 6 Mar. 2021 | 3 min read.

Recently I've been trying to optimize this website so that it loads faster. A clear way to do so is to optimise (or remove) any files that are required before the page has loaded.

One of the files that takes a while to download is the google font I've used, Syne Mono.

At 16.5kb it doesn't seem that big. However, given that the total file size of the page comes to less than 150kb (56kb of which loads after DOMContentLoaded), then we should see how much we can reduce this.

By adding a single parameter to the URL, I managed to get that 16.5kb down to a much healthier 7.1kb, with no visible differences in the text. Not bad!

Grabbing the font from Google

Here is the @import code given to us by Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');

Which, when imported, adds the following CSS to the site:

/* latin-ext */
@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/synemono/v2/K2FzfZNHj_FHBmRbFvHDK6qlPys.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/synemono/v2/K2FzfZNHj_FHBmRbFvHDJaql.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Unfortunately, we can't compress woff or woff2 files down any further, as they both have built-in compression.

But what if there are characters we aren't using? Looking at the Google Fonts site, there are at least a dozen characters I would never use:

Syne Mono Glyphs

I only use this font for the title, and the headers of each post. Given that all my posts will be in English, I can safely remove all the characters with accents.

Also, I'll never use the registered symbol, or the copyright symbol, or any of the different currency symbols...

It would almost be easier to specify only the characters I did want.

Luckily, Google allows you to do just this. By adding a text parameter to the request, you can list all the characters you want.

For instance, my @import now becomes:

@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!<>.:()?');

Which imports the following CSS:

@font-face {
  font-family: 'Syne Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=K2FzfZNHj_FHBmRbFvHzJ7icJgLbS1GxsNp5es0k6X-B6PsN3Cey3XUH7g3GPOV3iZjsI9qb1Etj8Wc62EwvM4BI79fYpWNq3NrSpMWe&skey=8967fef4ff6c75e2&v=v2) format('woff2');}

And, whilst having a much longer URL, the resulting woff2 file comes in at a nice 7.1kb.

And, it's even more efficient if you're only using the font to render a small amount of text that never changes. If I was only using the font to render the title, the resulting file would come in at 3.3kb, an 80% reduction.

CSSFront-end