How to Prepare and Use Variable Fonts on the Web
When I redesigned my blog, I decided to move away from using Work Sans and instead go with a newish font called Inter, a lovely typeface by Rasmus Andersson. Inter isn’t on Google fonts like Work Sans is, and I knew that if I wanted to use Inter, I would need to do a bit more legwork. In this article, I’ll walk you through the legwork I had to do to prepare and use the variable font variant of Inter, and how I was able to use only a single 43KB font file for every variation and weight! A brief introduction to variable fonts Envato Tuts describes what a variable font is: A variable font can contain a font’s entire glyph set, or individual glyphs with up to 64,000 axes of variation, including weight, width, slant, and, in some cases, specific styles, such as Condensed, Bold, etc. To put it simple–you only have a single file for all font variations instead of a file per variation. When you’re using custom fonts on the web, this means fewer files and faster load times. Variable font support in the browser is fairly new–Can I use shows that browsers started supporting variable fonts in 2018. In practical usage, if you want to display a custom font, you’ll probably want to make sure to include “legacy” non-variable fonts as a fallback. Preparing the font Before importing and using the font, you’ll want to prepare it. This in includes: Subsetting Converting it to the right (compressed) format Font subsetting is the practice of removing unused glyphs from fonts to make them smaller. In the case of Inter, there are many glyphs that I won’t need. Michael Herold put together a great guide all about subsetting fonts that explains how to use a python tool called pyftsubset found in fonttools. I would recommend reading his article, as it goes into much greater depth than this one on subsetting. And, since we’re using pyftsubset, we get the added benefit of file type conversion & font compression as well! 🎉 Here’s the command I used to subset & compress Inter: pyftsubset Inter.otf –unicodes=”U 0020-007F,U 00A0-00FF,U 0100-017F,U 2192″ –layout-features=”” –flavor=”woff2″ –output-file=”Inter-subset.woff2″ The previous article I mentioned can explain this command in greater detail, but at a high level, here’s what’s happening: –unicodes: This flag accepts ranges of unicodes for which glyphs to keep. The specific ranges I’m using are unicode ranges that represent upper and lowercase letters, numbers, and the → character. –layout-features: This flag enables OpenType features like tabular numbers or ligatures. I decided to strip all of the features for now, and add them in later if I need them. –flavor: This flag lets you choose your “flavor” (or format), which in this case is woff2. –output-file: The name of the output file from the command. Before this command, the font file was 780 KB, after subsetting and compression, it’s only 43 KB! That’s 5% of the size of the original file. 🤯 Using the font Now that the font is prepared, it’s time to use it on a site. This requires us to first import the font, and then add a few CSS tweaks to tell our font how to behave. » Read More
Like to keep reading?
This article first appeared on thetrevorharmon.com. If you'd like to keep reading, follow the white rabbit.