I like fast web sites. And privacy. Here is an easy way to simplify your web fonts, with the added benefit of a more efficient site and more privacy for your users.
How Did It Get So Bad?
Recently, I was trying to clean up CSS and font files for a blog site I manage. The problem was there were varying weights of the fonts used on the site. Since I host my fonts locally, I have to manually add the files and update CSS. And then I lost track of which weights I used where. Font weights range from 100 (super skinny), to 900 (super thick). “Normal” is 400, and “Bold” is 700. And then, of course, there are Italics, in the same weight range as Roman (upright) fonts.
As a baseline, it’s good to have 400 and 700 of Roman and Italic. So that’s four files. And then there is usually a second font family for headings. It’s unlikely you will use Italics, so that’s just two more files. Except I found myself using one or two other weights in other parts of a site.
Simplify With Variable Fonts
I had read about Variable Fonts at some website design blog I’ve long since forgotten, but something I read from WPJohnny triggered a memory that got me digging again. What I did remember from my first go-round was that a variable font file is about the size of two or three regular font files. Earlier, I said you would probably have two weights of a font family, but maybe two more for italics. At that point, you can save time with a single variable font file that is designed to have adjustable weight and slant. Now that’s a great way to simplify your web fonts.
But how about the size of that font? Modern browsers use WOFF and WOFF2 fonts, which are compressed fonts. Google Fonts download as TTF. For example, I downloaded the TTF for Dosis. And that was ~140kb. Looking at Dosis 400 in WOFF/2, it’s in the low 20kb range. TTF is shockingly bad for efficiency. Thankfully, there’s a Linux command line utility: woff2_compress. I tried all kinds of ways to get this binary before I realized that Ubuntu can easily install it. If I typed in woff2_compress, it would politely let me know I didn’t have that, but if I did an ‘apt install woff2’, it would install it for me. Done. So I converted that 140kb TTF and got a 56kb WOFF2 file.
The Real World
Those with keen eyes will notice I’m now using the Blocksy theme by Creative Themes. It’s amazingly good. So good that I paid for the lifetime Agency license. One of their Pro features is Local Fonts. I’ve used the OMGF plugin, which is pretty good, but it went through a major overhaul that wasn’t so smooth, so I began hand-crafting CSS to load the fonts I’d manually downloaded from Google Fonts. Blocksy Pro makes it so much easier to simplify your web fonts, so that’s what I use now on most of my WordPress sites. It will download the fonts for me and let me choose local fonts for the site. It also lets me upload whatever font I want, so I could do the same with variable fonts. For now, I’m using weighted fonts, but I may take a second shot at using variable fonts.