At Buffer, we’re continually experimenting with methods we will enhance our merchandise and check out new concepts. We just lately launched Begin Web page, a fantastic, versatile, mobile-friendly touchdown web page you could construct in minutes and replace in seconds. As a Software program Engineer on Buffer’s workforce I’ve tackled an extended record of enjoyable tasks, together with Begin Web page. One factor I like about this challenge, is that as we foray deeper and deeper into user-generated content material and customization, we’re discovering new engineering challenges that we haven’t had in our frontends earlier than. On this case, we needed to introduce 13 new font choices (for a complete of 16 fonts) and we needed to guarantee that they loaded good and shortly. As I labored on this, I realized a lot I didn’t learn about fonts so on this put up I wish to share extra about how we went about this for anybody dealing with related challenges.

Fonts are render-blocking

Let’s begin with the ‘why’. Fonts are typically fairly mild assets, that are normally cached in browser so why is it vital to make sure a fast loading technique? As a result of fonts are high-priority, synchronous requests which implies they’re render-blocking. If we will load fonts shortly and/or asynchronously, we will enhance website pace.

FOUT and FOIT

Okay, so that you don’t wish to block your rendering, there are typically two methods to selected from to deal with textual content loaded earlier than it’s customized font:

FOUT – Flash Of Unstyled Textual content
Renders the textual content however with a fallback font. Google Fonts can now return with show=swap which instructs the browser to make use of the fallback font to show the textual content till the customized font has totally downloaded. If you wish to be meticulous, you could find a greater fallback font utilizing this app: Font Model Matcher

FOIT – Flash Of Invisible Textual content
Right here, the textual content is rendered with an invisible font till the customized font has totally downloaded. This one makes extra sense to make use of for one thing like a brand the place the model can be affected if rendered with a fallback font (though for a brand I’d use an SVG however examples!)

THE trick for quick fonts

The final recommendation these days is to preconnect to the font server:

<hyperlink rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<hyperlink rel="preconnect" href="https://fonts.googleapis.com" />

then preload the fonts:

  <hyperlink
      rel="preload"
      as="model"
      href="https://fonts.googleapis.com/css2?household={your font households right here}&show=swap"
    />

Lastly as a fallback, request the fonts async by setting media to “print” for browsers which don’t help rel="preload" (about 12% of browsers on this the yr 2021)

<hyperlink
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?household={your font households right here}&show=swap"
      media="print"
      onload="this.media="all""
    />

This works as a result of an everyday stylesheet is render-blocking however a print stylesheet is assigned idle precedence. After it’s loaded, the hyperlink’s media is utilized to all.

Internet hosting your personal fonts is the quickest however Google Fonts does rather a lot for you:

• Returns a number of alphabets
• Returns a css file personalized to the consumer agent that requested it
• When you might have a number of fonts, it’s greatest to make 1 request so it is faster
• You possibly can tailor your requests to focus on particular font-weights and codecs (daring, italic, skinny)

Font Loading API

There’s a new-ish CSS Font Loading API that may request fonts on demand however I discovered that this doesn’t play good with Google Fonts since you want the supply URL for the fonts and the Google Fonts URL that you just get isn’t the supply, it’s the request. Google, together with Typekit, does have a library referred to as Internet Font Loader, that works just like the Font Loading API however performs higher with Google Fonts.

So what did we do in Begin Web page?

We applied the favored technique for the builder (the app itself) and whereas we do have some FOUT on first load ever (keep in mind browser caching!) it’s very minimal, if seen in any respect. For generated pages, we get the fonts used within the theme earlier than producing the HTML so we will inject solely the fonts we want. This makes our generated pages a lot quicker and lighter.We’re excited to see how this experiment will play out and if of us are eager to get extra font choices. If that’s the case, we would very properly look right into a extra dynamic technique (like loading solely the at present used fonts on load after which sending one other request if a consumer clicks on Look to alter their fonts). An alternative choice we might look into is implementing a approach for requesting a number of fonts if we hosted them ourselves.

That’s it for now! Thanks for making it this far, I hope this was attention-grabbing for you! Know something neat about fonts that I didn’t point out right here? Share it with us on Twitter.

Assets:
The Quickest Google Fonts
Loading Google Fonts and another net fonts as quick as attainable in early 2021
FOIT vs FOUT: a comparability on net font loading
CSS Tips – font-display