January 19, 2021 • 3 min read

Variable Web Fonts, 79% Lighter

Typography brings an incredible amount of identity and soul to branding; distinguishing and reflecting our ideals and values.

Branding on websites provides a unique opportunity to expand this character using custom web fonts. Unfortunately, complexity of choice expands when taking into account how the number of font bytes sent are steadily increasing, with more requests than ever.

Already gaining widespread support, variable fonts solve for both problems by packaging all possible font weights into a single file. This results in fewer round-trip requests and reduced overall network transfer required to load custom web fonts. Faster websites are a real crowd pleaser, especially for search engines.

Say hello to loading web fonts on that flaky cell tower connection. (…though, have a fallback just in case…)

Optimize your fonts. Or else.

On this website I previously used typeface-work-sans to load in my custom font files, since self-hosting fonts is recommended (especially considering newer browser caching policies).

If I know one thing about myself, it’s that I love using a variety of font weights when designing websites. Doing so ran me at 93kB of network transfer on four network requests, one for each weight in use.

This is still lower than the currently worldwide average of 132kB spread over five requests.

After switching to variable fonts, reducing the font to my needed character subset, and enabling Brotli compression, my fonts now clock in at 20kB received via one network request.

That’s a 79% decrease in network transfer more efficiently pooled into one request! 🎉

Do The Thing

Once you select a font you love with all your heart, make sure your download includes a variable font file. (If not, accept the heartbreak and send pleading love letters to the font’s creator.) With that variable font file on hand, here’s how to reduce, compress, and set it up for use:

Install the fonttools Python library.

pip install fonttools

Run this command, replacing WorkSans... with the name of your font file, as well as the output file name. This will only keep the uppercase and lowercase letters as well as space character for the font, while also applying Brotli compression:

pyftsubset WorkSans-VariableFont_wght.ttf \
    --unicodes="U+0020,U+0041-005A,U+0061-007A" \
    --flavor="woff2" \
    --output-file="WorkSans-VariableOptimized.woff2"

Import your beautiful new font file in your page <head>, telling browsers to preload the file for faster rendering:

<link
  rel="preload"
  href="/fonts/WorkSans-VariableOptimized.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

Add a @font-face CSS rule, noting what font weights and characters are supported by the file:

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  src: url(/fonts/work-sans-variable.woff2) format("woff2");
  unicode-range: U+0020, U+0041-005A, U+0061-007A;
}

Use the font!

Some additional topics to consider, depending on your required browser version support and needs:

Written by Anson Lichtfuss, a frontend engineer building useful, beautiful interfaces in Seattle.