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! 🎉
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:
fonttools
Python library.pip install fonttools
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"
<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"
/>
@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;
}
Some additional topics to consider, depending on your required browser version support and needs: