Last Updated:

Fast loading of strips to the site

A memorable site is inconceivable without loaded fonts. Typography on the web means as much as it does in a magazine twist. How to connect third-party fonts correctly so that the site does not slow down?

Fonts block rendering

Let's start with the "why." Fonts tend to be fairly lightweight resources that are cached in the browser, so why is it important to ensure they load quickly. Because fonts have a high priority, they block rendering. If we can load fonts quickly and/or asynchronously, we can improve site speed.

FOUT and FOIT

You can't block rendering, so we have two strategies to choose from to handle the loaded font:

FOUT – Flash Of Unstyled Text
Displays text, but in a spare font. Google Fonts can now come back with display=swap, which instructs the browser to use a fallback font to display text until the custom font is fully loaded. If you're meticulous, you can find the best replacement font with this app: Font Style Matcher.

FOIT – Flash Of Invisible Text
Here, the text is displayed in an invisible font until the custom font is fully loaded. This option makes more sense to use for something like a logo that will be displayed in a spare font (although I would use SVG for the logo, but you want examples!)

Trick for quick fonts

A general tip is to first connect to the font server:

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

then pre-load the fonts:

<link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
    />

Finally, as a fallback, request asynchronous fonts by setting the media to "print" for browsers that don't (about 12% of browsers this year 2021). rel="preload"

<link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
      media="print"
      onload="this.media='all'"
    />

This works because a regular style sheet blocks rendering, but the print style sheet is assigned an idle priority. Once downloaded, the links apply to everyone.

The fastest way is to place your own fonts, but Google Fonts does many other things for you:

  • Returns multiple alphabets
  • Returns the css file configured for the user agent that requested it.
  • If you have multiple fonts, it's best to make 1 request to make it faster
  • You can adapt your queries to specific fonts and formats (bold, italic, thin)

Font Download API

There's a new CSS Font Loading API that can query fonts, but it doesn't work very well with Google Fonts because you need the original URL for the fonts, and the Google Fonts URL isn't the source. Google, along with Typekit, has a library called Web Font Loader, which works as a Font Loading API, but with Google Fonts.

Glad if you found any of these solutions useful!