Load Fonts Quick

At Buffer, we are constantly experimenting with ways to improve our products and try new ideas. We recently started Home page, a beautiful, flexible, and mobile-optimized landing page that you can create in minutes and update in seconds. As a software engineer on the Buffer team, I’ve tackled a long list of fun projects, including the home page. One thing I love about this project is that as we dig deeper and deeper into user-generated content and customizations, we discover new technical challenges that we have never had in our front ends. In this case, we wanted to introduce 13 new font options (for a total of 16 fonts) and make sure they load nicely and quickly. I learned so much while working on it that I didn’t know about fonts. So in this post I want to tell you more about how we did it for anyone faced with similar challenges.

A screenshot of the homepage app demonstrating the new font selection functionality

Fonts block rendering

Let’s start with the “why”. Fonts are generally pretty lightweight resources that are usually cached in the browser. So why is it important to ensure a fast charging strategy? Since fonts have a high priority, they have synchronous requests, which means they are blocking rendering. If we can load fonts quickly and / or asynchronously, we can improve page speed.

FOUT and FAIT

Okay, you don’t want to block your rendering. In general, there are two strategies to choose from to process the loaded text before the custom font:

FOUT – Flash of unstyled text
Renders the text, but with a fallback font. Google Fonts can now return with display = swap, which tells the browser to use the fallback font to display the text until the custom font is fully downloaded. If you want to be meticulous, this app can help you find a better fallback font: Font style matcher

FOIT – Flash of Invisible Text
Here the text is rendered with an invisible font until the custom font is fully downloaded. This makes more sense for something like a logo where the brand would be affected if rendered with a fallback font (although I would use an SVG for a logo, but examples!)

THE trick for fast fonts

The general advice these days is to connect to the font server beforehand:

Then preload the fonts:

Finally, as a fallback, request the fonts to be asynchronous by setting Media to “Print” for browsers that do not support rel = “preload” (approx. 12% of browsers in 2021).

This works because a normal style sheet blocks rendering, but a print style sheet is given idle priority. Once loaded, the link’s media will be applied to all of them.

Hosting your own fonts is the fastest, but Google Fonts does a lot for you:

• Returns multiple alphabets
• Returns a CSS file customized for the user agent who requested it
• If you have multiple fonts it is best to make a request so it can go faster
• You can adapt your requests to specific font weights and formats (bold, italic, thin).

API for loading fonts

There’s a new-ish CSS Font Loader API can request the fonts on request but I found that this doesn’t work well with google fonts because you need the source url for the fonts and the google fonts url you get is not the source but the request. Google, along with Typekit, has a library called Web font loaderthat works like the Font Loading API, but works better with Google Fonts.

So what did we do on the homepage?

We implemented the popular strategy for the builder (the app itself) and while we have some FOUT on the first load (remember, browser caching!) It is very minimal, if any. For generated pages, we get the fonts used in the design before we generate the HTML, so we can only include the fonts that we need. This makes our generated pages much faster and easier. We’re excited to see how this experiment plays out and if people are interested in getting more font options. If so, we could very well consider a more dynamic strategy (e.g. only loading the fonts currently in use when loading and then sending another request when a user clicks Appearance to change their fonts). Another option we might consider implementing a way to request multiple fonts if we have hosted them ourselves.

That’s it for now! Thank you for making it this far, I hope you found this interesting! Do you know anything nice about fonts that I didn’t mention here? Share it with us on Twitter.

Resources:
The fastest Google Fonts
Load Google Fonts and all other web fonts as soon as possible in early 2021
FOIT vs FOUT: A Comparison of Loading Web Fonts
CSS Tricks – Font Display