How to subset fonts for performance optimization?
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.
pyftsubsetwith desired options
- Bare minimum Latin subset
- Latin subset with some extra characters
More information available here.
Supported features for Inter here.
Size reduced from total 733KB woff2 to just 72KB woff2.
Plus Jakarta Sans
Supported features for Plus Jakarta Sans here.
And, a static font file for the opengraph image api.
Supported features for JetBrains Mono here.
You can now load the woff2 font files using
@font-face, or using
next/font/local package as I have shared in this post.