December 11, 2023·1 year ago

Subsetting Fonts

How to subset fonts for performance optimization?

Generating a font subset

Some fonts have hundreds or thousands of glyphs covering many languages. Font subsetting can make your font files as small as just 5% of the original font files depending on the subsets you choose to use for your website. Here’s how I generated subsets for the Inter font family.

Install fonttools and brotli

pip install fonttools brotli

Run pyftsubset with desired options

Subsets

Bare minimum Latin subset

U+0020-007F

Latin subset with some extra characters

U+0000-007F, U+0080-00FF

More information available here.

Inter

Supported features for Inter here.

pyftsubset \
  "InterVariable[wght,opsz].ttf" \
  --output-file="InterVariable[wght,opsz].woff2" \
  --flavor="woff2" \
  --layout-features="liga, calt, case, tnum, zero, ss01, ss02, ss03, cv05, cv08" \
  --unicodes="U+0000-007F"

pyftsubset \
  "InterVariable-Italic[wght,opsz].ttf" \
  --output-file="InterVariable-Italic[wght,opsz].woff2" \
  --flavor="woff2" \
  --layout-features="liga, calt, case, tnum, zero, ss01, ss02, ss03, cv05, cv08" \
  --unicodes="U+0000-007F"

Size reduced from total 733KB woff2 to just 72KB woff2.

Plus Jakarta Sans

Supported features for Plus Jakarta Sans here.

pyftsubset \
  "PlusJakartaSans[wght].ttf" \
  --output-file="PlusJakartaSans[wght].woff2" \
  --flavor="woff2" \
  --layout-features="liga, calt" \
  --unicodes="U+0000-007F"

pyftsubset \
  "PlusJakartaSans-Italic[wght].ttf" \
  --output-file="PlusJakartaSans-Italic[wght].woff2" \
  --flavor="woff2" \
  --layout-features="liga, calt" \
  --unicodes="U+0000-007F"

And, a static font file for the opengraph image api.

pyftsubset \
  "PlusJakartaSans-SemiBold.ttf" \
  --output-file="PlusJakartaSans-SemiBold.woff" \
  --flavor="woff" \
  --unicodes="U+0000-007F"

JetBrains Mono

Supported features for JetBrains Mono here.

pyftsubset \
  "JetBrainsMono[wght].ttf" \
  --output-file="JetBrainsMono[wght].woff2" \
  --flavor="woff2" \
  --layout-features="liga, calt" \
  --unicodes="U+0000-007F"

pyftsubset \
  "JetBrainsMono-Italic[wght].ttf" \
  --output-file="JetBrainsMono-Italic[wght].woff2" \
  --flavor="woff2" \
  --layout-features="liga, calt" \
  --unicodes="U+0000-007F"

Loading Fonts

You can now load the woff2 font files using @font-face, or using next/font/local package as I have shared in this post.