Subsetting your Fonts in Windows 10 using WSL

‘Subsetting’ your custom font to use only the characters that you need and therefore reduce the file size too

A font file usually comes with tons of imaginable symbols. But most likely all you would ever need is the latin characters, you know like ABC12345. So that’s what subsetting do for you — Extracts only the characters(or technically glyphs) that you are going to need in your website.

If you run a proper Linux/unix machine like MacBook, you can just use the glyphhanger tool as shown in this guide and be on your merry way.

However, if you are on a Windows machine like me that runs the Windows Subsystem for Linux(WSL), it wouldn’t be as straightforward and tons of obstacles would get in your way. Although there was nothing that a quick google couldn’t solve, it does crush your soul ever so little.

And guess what, WSL doesn’t come with a real linux kernel(upcoming WSL2 will change that). And that turns out to be a show stopper. Because turns out that glyphhanger depends on puppeteer which depends on a whole pile of stuff that you need to install, and then at one point they just keep hitting me with Failed to launch chrome and No usable sandbox errors that unless your machine has a proper linux kernel, the two solutions suggested here wouldn’t work for you.

What ended up working for me was a much simpler and straightforward method. You still need the WSL, but it will do just fine with the way it is. 😻

Do it boi!

But first, we have the…

Unicode crashcourse 💥

Unicode of A alone is U+0041 or U+41 in Hex or U+65 in decimal

Unicode range of A to Z is U+41-5a in Hex or U+65–90 in decimal.

Specifying multiple different unicodes is comma separated:U+41-5a, U+2F

Find out all your Unicode or Unicode range

First step to subsetting is to figure out all the unicodes that your website will need.

There are two ways.

First, let Glyphhanger do it for you

Go to your bash terminal:

Press window key+r , then type cmd , then press Enter , then finally, inside your cmd, type bash to get into your Ubuntu’s prompt.

Then install the glyphhanger:

npm i -g glyphhanger

Then let it crawl your website:

glyphhanger https://yowebsite.com

And it will give you all the unicode and ranges that are used like this:

U+20,U+27-29,U+2C-2E,U+30-32,U+35-39,U+3F,U+41-4A,U+4D-50,U+52-54,U+57,U+61-7A,U+A9,U+2019,U+2022,U+2192

Take note of that cuz we gonna need it when we do the subsetting later.

Second, do it manually

If you already know which specific characters you will need but just needed to know what are their corresponding unicodes, then the tool below will help you out:

http://renaun.com/flex4/fefurg/

If you just to know the unicode range for a whole type of language like Amenian or whatever, then this will help:

Now we do the Subsetting

First, you gonna need python3:

sudo apt update && upgradesudo apt install python3 python3-pip ipython3

Then you gonna need fontTools which is used underneath by glyphhanger:

pip install fonttools

You might hit error like Permission denied . If so, do

pip install --user fonttools

Then we gonna install two compression modules zopfli and brotli for even smaller font file size! They will be used by the fontTools’s subsetting pyftsubset command when it creates woff and woff2 font files.

pip install --user zopflipip install --user brotli

Now, put your .ttf font file in your /mnt/c/Users/<user> directory, which basically means in your C:\Users\<your window username> .

that will be C:\Users\kwei8

Next we gonna create woff and woff2 out of the ttf while subsetting them to our desired unicode range using the pyftsubset command.

First we will create our woff file.

Remember to provide your unicode range that you found out with glyphhanger above to the --unicodes option as shown below:

pyftsubset Inter-Regular.ttf --unicodes="U+65-90" --flavor=woff --with-zopfli

The syntax is like:

pyftsubset <yo_font_name>.ttf --unicodes="<yo_unicode_range" --flavor=woff --with-zopfli

Finally, we will create the woff2 file:

pyftsubset Inter-Regular.ttf --unicodes="U+65-90" --flavor=woff2

Now you should see two files Inter-Regular.subset.woff and Inter-Regular.subset.woff2 in your C:\User\<name> .

Inspect the results 🌈

To see if the generated files have got only your desired characters, you can drop them into this tool(only supports woff file though) and view them:

(Premature) Optimization

Reduce font sizes

You can further reduce your font sizes by deriving your woff and woff2 files from the OpenType (OTF) files. I’m getting almost 25% reduction! Pretty sweet! 🍠

Enable some options in pyftsubset

--no-hinting --drop-tables+=GSUB --desubroutinize

(Inspiration)

Removes the --desubroutinize option if you are working with OTF files.

Pay closer attention to stuff from running pyftsubset --help !

Automation

Here is my Bash script to generate all my woff/2 files:

#!/bin/bash# Basic Latin characters
unicode="U+0-7F"
# Don't do --desubroutinize cuz otf relies on it
optimization="--verbose --no-hinting --drop-tables+=GSUB"
# woff
pyftsubset Inter-Regular.otf --unicodes="$unicode" $optimization --flavor=woff --with-zopfli
pyftsubset Inter-Italic.otf --unicodes="$unicode" $optimization --flavor=woff --with-zopfli
pyftsubset Inter-Medium.otf --unicodes="$unicode" $optimization --flavor=woff --with-zopfli
pyftsubset Inter-MediumItalic.otf --unicodes="$unicode" $optimization --flavor=woff --with-zopfli
pyftsubset Inter-SemiBold.otf --unicodes="$unicode" $optimization --flavor=woff --with-zopfli
pyftsubset Inter-Bold.otf --unicodes="$unicode" $optimization --flavor=woff --with-zopfli
# woff2
pyftsubset Inter-Regular.otf --unicodes="$unicode" $optimization --flavor=woff2
pyftsubset Inter-Italic.otf --unicodes="$unicode" $optimization --flavor=woff2
pyftsubset Inter-Medium.otf --unicodes="$unicode" $optimization --flavor=woff2
pyftsubset Inter-MediumItalic.otf --unicodes="$unicode" $optimization --flavor=woff2
pyftsubset Inter-SemiBold.otf --unicodes="$unicode" $optimization --flavor=woff2
pyftsubset Inter-Bold.otf --unicodes="$unicode" $optimization --flavor=woff2

Save that script like fontSubset.sh , put that in the same directory as your source font file .otf or .ttf . Then navigate to that directory in your Bash and do ./fontSubset.sh , and it will do its thing!

OK cool that’s all I got bro. 🚶

EDIT (11 Aug 2020): If you don’t want to subset, you still need the ‘fonttools’ and then follow this answer.

“Untitled” by Kheoh Yee Wei

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store