Down with flabby fonts

How to subset large web font files to improve your site’s performance.

2021-08-08

Reading time: 2:44 • 615 words

General note: This site’s appearance, configuration, hosting, and other basic considerations will change over time. As a result, certain content on this page could be at variance with what you’re currently seeing on the site, but the two were consistent when this post originally appeared.

Consider this a blast from the past, just the not-too-distant past.

Last year, I issued the initial offering of what became a series of “Gems in the rough” posts with tips for my fellow and sister static website nerds. Near the end of that post, I described a procedure for cutting web fonts down to size, so as to make them a smaller (and thus faster) download for your visitors.

Because I keep seeing the appearance of non-downsized fonts in the code of more websites than I care to consider, I thought I’d give that segment a post of its own, albeit with a few edits here and there to account for current realities.

So return with us now to that thrilling post segment of yesteryear . . .1

Very Inter-esting

As of the initial publication of this post, this site uses the Inter font, and specifically the variable version thereof (which, from here, I’ll call “Inter VF”). Inter is a beautiful sans-serif font that looks a lot like San Francisco, the native system font on Apple devices.

Sample of the Inter web font

The problem is that, due to the vast number of glyphs it contains, Inter can be a really large download. So you want to make sure you subset it, extracting only those parts your site will actually use, and then use your CSS to tell the site to use only those parts. This is referring specifically to Inter VF because I think using just the variable-font version, which can provide all the styles you want, is more sensible than having to do the following procedure with multiple conventional (static) font files:

  1. Download the full variable-font version of Inter (its repository’s “Releases” page should always have the latest). It’s a TrueType font (.ttf), but that’s OK. In the next step, you’ll fix that.

  2. To subset, install and use the Python fonttools library as explained by Michael Herold. For example, here’s the command I use to change the Inter VF TrueType font to the .woff2 web font file I want (the file naming is based on the Inter v.3.19 font I used):

    pyftsubset Inter.ttf \
--unicodes="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" \
--layout-features="kern,liga" \
--flavor="woff2" \
--output-file="Inter-3-19_subset_2021-06-18.woff2"

  3. Set your CSS to use Inter VF for all your font weights (we’ll tell it how to handle slanted text in a moment), as shown here in the fonts_Inter.css file I @import with PostCSS for my site’s final CSS:

    /* === Inter, variable === */
/* ===
references:
https://thetrevorharmon.com/blog/how-to-prepare-and-use-variable-fonts-on-the-web
https://rwt.io/typography-tips/getting-bent-current-state-italics-variable-font-support
=== */
/* latin */
@font-face {
	font-family: 'Inter';
	font-weight: 1 999;
	font-style: normal;
	font-display: swap;
	/* optional is best for first-run CLS checks; swap looks better on one-hit */
	src: url('/assets/fonts/Inter-3-19_subset_2021-06-18.woff2') format('woff2-variations');
	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;
}

  4. Finally, counter the weirdness of how Inter VF handles slanted (obliqued) text in different browsers.2 In my intervf.css file (also @imported into the final CSS), I have found the following to work for all the major current browsers, and please note that some of this is due to my use of Tailwind CSS:

    /* === handling Inter VF obliquing */
.italic, i, cite, em, var, address, dfn, h3, h5 {  /* dealing with Inter VF */
	font-variation-settings: 'slnt' -8;
	/* previous is needed by Chromium and Safari; its presence makes Firefox "over-slant" Inter VF, so we override that below with the media query for Firefox */
	font-style: oblique 8deg;
	/* previous is needed by Firefox and Safari; it apparently has no effect on Chromium */
}

@supports (-moz-appearance: none) {
	.italic, i, cite, em, var, address, dfn, h3, h5 {
		/* font-variation-settings: normal; */
		font-style: normal;
	}
}
/* === end, handling Inter VF obliquing */

Slim, Jim

Back to the present . . .

I encourage you to get comfortable with the subsetting procedure described here. After all, there are a lot of other great web fonts for the grabbing, and virtually all of them can use the slimming-down process this involves.3 It’s not easy to put yourself on a diet when that’s needed, but following these steps will make it a snap to de-fat your fonts.

  1. H/t to the fabled intro for The Lone Ranger. ↩︎

  2. Like many sans-serif fonts, particularly variable versions thereof, Inter VF doesn’t do true italics; instead, it does obliques. ↩︎

  3. Besides, your site may have totally different needs where the characters-to-be-included-in-the-subset are concerned, so it makes sense to learn this procedure and adapt it for not only different fonts but also different subsetting. ↩︎

Latest commit (7ec2a787) for page file:
2023-05-03 at 1:04:39 PM CDT.
Page history

NEXT   

PREVIOUS