Mar 23, 2021

Fonts, Fonts, Fonts

By Duncan Mackenzie • Issue #3 • View online

I usually think of JavaScript as the biggest source of performance issues and then overly large images as a nice low-hanging fruit, but in between we have fonts. It is rare to see a new site that uses just system fonts, so the downloading and display of one or more web fonts is a common performance issue. On my journey through font loading and system vs. web fonts, I ended up creating a whole new staging/test site for myself and even wrote about it as the first piece in this issue.

Creating a copy of a site for testing

Setting up a clone of my site for testing

I had the bad habit of doing my performance testing in production, so I set up a new version of my site completely designed for trying out various experiments without risking breaking my live pages.

www.duncanmackenzie.net • Share

For many sites, using Workers could be a better option

Matt has created this step by step guide on how to get started with using Cloudflare Workers as a ‘proxy’ layer where you can make changes to a production site for the purposes of performance testing. Definitely setting this up to work against Microsoft Docs soon!

nooshu.github.io • Share

On to the main topic: Fonts and Font Loading

The Best Font Loading Strategies and How to Execute Them

There is a very detailed guide to all of the different strategies for loading fonts, and I’ve linked it as the next item in this issue, but if you want a quick TL;DR; of that guide, start with this simplified discussion.

css-tricks.com • Share

A Comprehensive Guide to Font Loading Strategies

Zach Leatherman has written a ton of posts about optimizing your use of fonts, start with this detailed guide and then dig into all these posts.

www.zachleat.com • Share

The importance of `@font-face` source order when used with preload

Matt Hobbs dug into the performance of a newly updated WhiteHouse.gov homepage and walks through how an optimization in font order can avoid some costly large font file downloads.

nooshu.github.io • Share

Moving my Google fonts local

Viewing the network trace of my web page, moving my web fonts local seemed like the easiest way to make a significant impact in performance.

www.duncanmackenzie.net • Share

How I set up Glyphhanger on macOS for optimizing and converting font files for the Web

Great walkthrough of setting up and using a font utility, but the part most thought provoking was the idea of subsetting fonts to only include the Unicode ranges your site uses, which led me to this other article that dives into exactly that topic.

www.sarasoueidan.com • Share

Did you enjoy this issue?

By Duncan Mackenzie

In each newsletter, I'll share a set of links related to web development and software engineering. As the editor, my opinions are going to influence the topics and tone of this material, so expect to see lots of information on web performance and general topics around working in a software engineering team! Check it out and let me know what you think at https://twitter.com/duncanma

Tweet

Share

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.