Subsetting fonts without any specialist software

Most websites use web fonts – a file or files containing all the characters or ‘glyphs’ – adding to the number of requests and overall loading time of a webpage.

Worth noting, you don’t have to use a web font. There are a few default or fallback ‘stacks’ of nicer system fonts. TailwindCSS uses this:

font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

I use the Inter Tight font on this website. I really like it and it’s similar to the premium Helvetica font.

It’s so good that it supports multiple languages:

• Cyrillic
• Greek
• Latin

I can guarantee I will only use Latin – and a subset of Latin at that. I don’t need the accents and umlauts found in French and German, for example.

So I subset the font. I state which glyphs I require and only compile those into a file.

Comparing the TrueType (.ttf) files, I save a lot:

Font	All glyphs	Subset
Inter Tight	582KB	85KB

That’s an 85% decrease! In production, I use a compressed WOFF2 version which is only 36KB.

So how do we get a file like this from Google? Just enter the characters you want after text= in this URL:

https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900&text=Dan

Don’t forget you’ll need to URL encode special characters and remember to include spaces and punctuation.

In the example above, you're only getting the letters D, a and n. For basic Latin, you could use:

https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900&text=!%22%23%24%25%26%27()*%2B%2C-.%2F0123456789%3A%3B%3C%3D%3E%3F%40ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5D%5E_%60abcdefghijklmnopqrstuvwxyz%7B%7C%7D~%7F

You only need to use the text key if you want to create a very small or very specific subset.

To download the file, copy the address between url() brackets ending in .woff2.

Google has some predefined subsets you can use too. If I omit the text key and load https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900 this is what I see...

/* cyrillic-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/intertight/v1/NGSwv5HMAFg6IuGlBNMjxLsK8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/intertight/v1/NGSwv5HMAFg6IuGlBNMjxLsD8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/intertight/v1/NGSwv5HMAFg6IuGlBNMjxLsL8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/intertight/v1/NGSwv5HMAFg6IuGlBNMjxLsE8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/intertight/v1/NGSwv5HMAFg6IuGlBNMjxLsI8ahuQ2e8Smg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/intertight/v1/NGSwv5HMAFg6IuGlBNMjxLsJ8ahuQ2e8Smg.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: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  src: url(https://fonts.gstatic.com/s/intertight/v1/NGSwv5HMAFg6IuGlBNMjxLsH8ahuQ2e8.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;
}

Here, you can simply copy one of the WOFF2 files between the url() brackets into the address bar and download the file.

Now you can use a smaller subset on your website.

And, if you’re ever unsure whether you’ll need a subset or which subsets to use, the CSS from Google shown above solves it for you.

By specifying unicode-range, the browser will only load subsets that are used on the page.